关于前端:Vue及React如何解决跨域问题

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

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

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

提醒：须要保障 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简略解决跨域能够间接在 package.json 中增加 proxy 属性

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

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

<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如何解决跨域问题

Vue 及 React 如何解决跨域问题

前言

一、Vue 中解决跨域

二、React 中解决跨域

总结