Question

我正在尝试在我的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

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

如何在React / Redux应用程序中将头添加到axios.create

2 个答案: