时间戳

首页 > 解决方案 > 如何在 react/redux 应用程序中向 axios.create 添加标头

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

问题描述

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

标签： reactjsreduxreact-reduxaxios

解决方案

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

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

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

推荐阅读