Vue及React如何解决跨域问题
有小伙伴在评论里让我出一篇关于Axios和跨域问题的,上一篇文章整理了一下Axios的使用封装的问题,本章就讲述一下如何在Vue和React中解决跨域问题
·
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': '/' }
}
}
3. 方案三(推荐):
- 安装
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中如何解决跨域问题,如果觉得实用的话,可以点赞评论收藏三连哦~ 文章不定期更新,关注博主不迷路~
更多推荐
已为社区贡献4条内容
所有评论(0)