Vue及React如何解决跨域问题

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

前言

跨域问题的呈现次要是因为浏览器的同源策略，解决跨域实际上就是两头做了个代理，能够申请到数据

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

一、Vue中解决跨域

提醒：须要保障vue-cli脚手架在3.0及以上

  1. 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': ''     }   } }  },}

  2. 在axios配置文件中配置baseURL

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

二、React中解决跨域

  1. 计划一：
    react简略解决跨域能够间接在 package.json 中增加 proxy 属性

  2. 计划二：
    如果曾经进行了 npm run eject ，倡议你间接批改 config => webpackDevServer.config.js：

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

  3. <font color="#f00">计划三（举荐）</font>：

  4. 装置 http-proxy-middleware ：

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

  5. 这里留神， 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": "",         },     }) );};
  6. 从新 npm run start 即可解决跨域

总结

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

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