前端配置proxy跨域

image.png

相信做前端开发的都没少见这种跨域的错误，怎么解决呢？🤔

🌟react项目 跨域配置

都是基于 create-react-app 创建的项目，其他不可用！！！

1.在package.json中修改

    "proxy": {
        "/api": {
            "target": "http://localhost:8000",
            "changeOrgin": true,
            "pathRewrite": {
                "^/api": ""
            }
        }
    }

npm run start //重新运行

2.下载 http-proxy-middleware
官方说明
创建 src/setupProxy.js

const proxy = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(proxy.createProxyMiddleware('/api', {    // 'api'  需要转发的请求
    target: 'http://localhost:8000',  //接口服务器地址
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    },
  }));
};

3.用umi创建的项目 配置跨域

---

🌟vue项目 跨域配置

1.配置 vue.config.js 文件,详细配置可参考文章 Vue CLI3.0<遇到的问题记录>

// Vue.config.js 配置选项
module.exports = {
    ...
    devServer: {
        ...
        proxy: {
            '/api': {
                target: 'http://localhost:8080', //目标接口域名
                secure: false, //false为http访问，true为https访问
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/api': '' //重写接口
                }
            }
        }, // 设置代理
        before: app => { }
    },
    ...
};

---

🌟通用的跨域配置 (适用于任何项目)

这种配置的安全性不是很好，所以建议考虑使用，但是很方便～～
来自于前端同事的推荐，也不知道他在哪里找的，学废了!!学废了!!

• 首先在桌面创建一个文件夹 CORS (可自定义)
  image.png

• 拷贝当前文件夹的路径地址(我的是Mac，Windows的就不用我多说了)

  
  image.png
• 打开终端，输入命令，直接回车，然后会自动弹出一个Chrome浏览器

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=你复制的文件路径

image.png

• 此时直接在打开的Chrome浏览器中输入你本地测试的地址，然后再进行调试操作，这时就不会报跨域错误了
  A magic!!!!😱😱
  image.png