Vue及React如何解决跨域问题

提示：如果想了解Axios的话，可以去博主主页找文章Axios的封装以及如何使用
有小伙伴在评论里让我出一篇关于Axios和跨域问题的，上一篇文章整理了一下Axios的使用封装的问题，上一章指路：Axios的封装以及如何使用，本篇文章就讲述一下如何解决跨域问题...

前言

跨域问题的出现主要是因为浏览器的同源策略，解决跨域实际上就是中间做了个代理，可以请求到数据

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue中解决跨域

提示：需要保证vue-cli脚手架在3.0及以上

vue.confige.js中配置proxy

module.exports = {
  // ...其它配置
  devServer: {
 host: '127.0.0.1',
 port: 8087, // 端口号
 https: false, // https:{type:Boolean}
 open: false, //配置自动启动浏览器
 // proxy: 'http://192.168.1.156:81', // 配置跨域处理,只有一个代理

 // 配置多个代理
 proxy: {
   '/apis': { // 这里apis不固定，可以起其它名
     target: 'http://192.168.1.156:81', // 要访问的接口域名
     ws: false, // 是否启用websockets
     changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
     pathRewrite: {
       '^/apis': ''
     }
   }
 }
  },
}

在axios配置文件中配置baseURL

import axios from 'axios'
axios.defaults.baseURL = '/apis' //此处apis与配置文件中的名字需一致，此处博主在vue.confige.js配置的apis所以此处写/apis

二、React中解决跨域

方案一：
react简单解决跨域可以直接在 package.json 中添加 proxy 属性

方案二：
如果已经进行了 npm run eject ，建议你直接修改 config => webpackDevServer.config.js：

proxy: {
  '/api': {
 target: 'https://www.ahsj.link/rambo', // 后台服务地址以及端口号
 changeOrigin: true, //是否跨域
 pathRewrite: { '^/api': '/' }
  }
}

proxy

<font color="#f00">方案三（推荐）</font>：

安装 http-proxy-middleware ：

npm i http-proxy-middleware
// 或者yarn
yarn add http-proxy-middleware

这里注意， http-proxy-middleware 模块是有版本区别的，默认安装最新版本，然后在 src 目录下新建 setupProxy.js ：

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
 app.use(
     "/api",
     createProxyMiddleware({
         target: "https://www.ahsj.link/rambo",
         changeOrigin: true,
         pathRewrite: {
             "/api": "",
         },
     })
 );
};

重新 npm run start 即可解决跨域

总结

提示：这里对文章进行总结：

例如：以上就是Vue和React中如何解决跨域问题，如果觉得实用的话，可以点赞评论收藏三连哦~ 文章不定期更新，关注博主不迷路~

Vue及React如何解决跨域问题