react axios 跨域问题

Posted 鹿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react axios 跨域问题相关的知识,希望对你有一定的参考价值。

周末又是补充知识点的时候了,用了react axios 跨越问题,貌似是要比vue 稍微麻烦一点

它请求http好像是没有问题的,但是https还是有跨域问题的,

我用的刚好是create-react-app 这个搭建的react 项目,你必须要确保 运行了npm run eject,


    把你的webpack暴露出来,好了接着在 package.json 配置下面这段话:

    当然是在末尾加入就行了

 "proxy": {
    "/*": {
      "target": "https://douban.uieee.com",
      "changeOrigin": true
    }
  }

这样还没有解决跨越问题,还必须在axios 文件创建请求判断:

import axios from ‘axios‘
let baseUrl = ‘https://douban.uieee.com‘;

if (process.env.NODE_ENV === ‘development‘) {
    baseUrl = ‘http://localhost:3000‘;
} else {
   // baseUrl = ‘http://localhost:3000‘;
}
// export const baseUrl = ‘http://localhost:3000‘;
let $axios = axios.create({
    baseURL: baseUrl + ‘/v2/movie‘,
    timeout: 10000,
    responseType: ‘json‘,
    headers: {
        ‘Content-Type‘: ‘application/x-www-form-urlencoded; charset=utf-8‘,
    }
});

我是结合Promise 请求数据的这样你就可以在解决跨区问题了,正式环境就配置正式的环境。

好了 ,7月了, 希望7月对我好点,继续加油!   

 


以上是关于react axios 跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

解决react项目中跨域和axios封装使用

React axios 使用 http-proxy-middleware 解决跨域问题小记

ReactAjax 相关 - axios - 配置代理解决跨域问题 -消息订阅/发布机制 - PubSubJS - Fetch - github用户搜索案例

rails api,react前端,axios,开发中的CORS不起作用

跨域请求被阻止,即使它以 200 ok 状态码响应

VUE axios POST 发送跨域 cros 问题