react项目中设置axios跨域问题

来源:网络 文章列表 2019-12-13 8
在react中设置跨域还是非常简单的,如果是单个api接口的话,直接在 package.json 中设置proxy字段,在create-react-app2.0中限制了,不能在和以前一样简单的配置proxy跨域了,现在如果你需要多个api接口跨域的话,那么就得另外配置!

在react中设置跨域还是非常简单的,如果是单个api接口的话,直接在 package.json 中设置proxy字段,如下:

"proxy": "http://localhost:8000"

是不是超级简单

有些同学可能会遇到下面这个报错

When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.

那是因为package.json文件里是不能把proxy字段写成下面这种形式的。

"proxy": {
    "/api/": {
      "target": "http://localhost:8000"
    }
}

 

同理,当你需要多个不同的api接口呢?你直接在package.json文件里配置proxy成对象?如下

"proxy":{
    "/api/v1": {
      "target": "https://www.fakin.cn",
      "changeOrigin":true
    },
    "/api/v2":{
      "target":"https://www.fakin.cn",
      "changeOrigin":true
    }
}

当你npm start启动的时候,你就会发现类似于下面的报错

When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! r-d-m@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1

这个报错的意思是proxy只能是字符串不能是对象(真是叫人头大啊,以前这么配置就行,为什么现在不行)

报错的原因是:

create-react-app2.0中限制了,不能在和以前一样简单的配置proxy跨域了,现在如果你需要多个api接口跨域的话,那么就得另外配置!

大部分react应用可以用create-react-app构建,开箱即用,如果自定义配置可以npm run eject,目前create-react-app2.0不能在和以前一样配置proxy跨域了(单个可以,多个不行)

解决办法:

1、安装http-proxy-middleware

npm install http-proxy-middleware

2、在src目录下创建setupProxy.js,加入以下代码

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(proxy('/baidu', {
        target: "https://news.baidu.com/",
        pathRewrite: {'^/baidu': ''},
        changeOrigin: true
    }));
    app.use(proxy('/api', {
        target: "https://www.fakin.cn/",
        pathRewrite: {'^/api': ''},
        changeOrigin: true
    }));
};

此处需要注意的是 setupProxy.js  文件是在src目录,而不是在根目录

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接