如何在react / redux app中向axios.create添加标头

Question

我正在尝试使用我的react-redux应用程序中的axios.create访问JSON数据。 我把thunk安装为中间件。 我在请求的资源上出现“No'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

Answer 1

您可以尝试使用Postman发送请求吗？ 如果Postman可以发送您的请求，则此错误来自您的服务器。 如果您使用Express，此代码段可以帮助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();
});

Answer 2

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

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

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