如何在 react/redux 应用程序中向 axios.create 添加标头答案

【问题标题】：How to add header to axios.create in react/redux app如何在 react/redux 应用程序中向 axios.create 添加标头
【发布时间】：2019-08-22 04:36:56
【问题描述】：

我正在尝试在我的 react-redux 应用程序中使用 axios.create 访问 JSON 数据。我已将 thunk 安装为中间件。我收到“请求的资源上不存在‘Access-Control-Allow-Origin’标头”错误。根据我在网上阅读的内容，我可以通过在 axios.create 调用中添加标头来解决这个问题。我该怎么做呢？

//api file
import axios from 'axios';

export default axios.create({
  baseURL: 'https://www.thehomelike.com/search/'
})

//actions/index.js
import jsonPlaceholder from '../apis/jsonPlaceholder';

export const fetchPosts = () => {
  return async dispatch => {
    const response = await jsonPlaceholder.get('DE/Berlin?country=DE&east=13.499539418719593&lang=en-GB&lat=52.52000659999999&lng=13.404953999999975&locality=Berlin&mapLimit=24&north=52.5942101138977&south=52.445677542691186&west=13.310368581316283');

    dispatch({ type: 'FETCH_POSTS', payload: response })
  }
}

这些是根据 chrome 的网络工具的标题。

Response Headers:
access-control-allow-credentials: true
access-control-allow-headers: authorization
access-control-allow-methods: GET,HEAD,PUT,PATCH,POST,DELETE
access-control-allow-origin: https://www.thehomelike.com
date: Mon, 01 Apr 2019 06:23:11 GMT
server: nginx
status: 204
vary: Origin, Access-Control-Request-Headers
x-powered-by: Express

【问题讨论】：

标签： reactjs redux react-redux axios

【解决方案1】：

您可以使用默认标头创建 axios 实例

const request = axios.create({
  baseURL: 'https://www.thehomelike.com/search/', 
  headers: { // ...your headers}
});

您面临的问题，也可以在server 方面解决。您必须更新服务器策略以允许 CORS。如果你的服务器在node-express，你可以试试这个https://www.npmjs.com/package/cors

【讨论】：

我要包括哪些？我在帖子底部包含了所有响应标题。
我认为，与其编辑请求，不如修改服务器策略
我无权访问服务器
此代码如何解决 CORS 问题，有人可以指导我吗？ @Harish
@AshishKamble 上面的代码不能解析 CORS，它应该只在你的 API 服务器上处理。

【解决方案2】：

你可以尝试使用Postman 发送请求吗？如果Postman 可以发送您的请求，则此错误来自您的服务器。如果您使用 Express，此代码 sn-p 可以帮助 U，但是，将为您服务器上的所有资源启用 CORS

var express = require('express');
var app = express();
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

【讨论】：

邮递员可以发送请求，因此它会在其中提取 JSON 文件。