Vue和React如何解决跨域问题

Vue和React如何解决跨域问题的小技巧：想了解axios的可以去博主主页找文章axios打包和使用方法。有朋友让我在评论里发一篇关于axios和跨域问题的文章。本文整理了axios的使用和封装问题。上一章导路：Axios的封装及使用方法。本文讲述如何解决跨域问题...前言跨域问题的出现主要是由于浏览器的同源策略，解决跨域其实就是中间的代理，可以请求数据提示：以下为本文正文内容，以下案例可以参考1.解决vue中的跨域提示：需要保证vue-cli脚手架在vue.confige.js3.0及以上版本中配置proxymodule.exports={//...其他配置devServer:{host:'127.0.0.1',port:8087,//端口号https:false,//https:{type:Boolean}open:false,//配置浏览器自动启动//proxy:'http://192.168.1.156:81',//配置跨域处理，只有一个proxy//配置多个proxyproxy:{'/apis':{//这里apis不固定，你可以换个名字:true,//启用代理：会在本地创建一个虚拟服务器，然后请求的数据会同时发送和接收，这样就可以了e与服务器之间的数据交互不会出现跨域问题pathRewrite:{'^/apis':''}}}},}在axios配置文件中配置baseURLdefaults.baseURL='/apis'//这里的apis必须和配置文件中的名字一致，这里博主在vue.confige.js中配置了apis，所以这里写/apis。2、解决React中的跨域解决方法一：react可以简单的在package.json中添加proxy属性解决跨域解决方法二：如果你已经进入OKnpmruneject，建议直接修改config=>webpackDevServer.config.js:proxy:{'/api':{target:'https://www.ahsj.link/rambo',//后台服务addressandPortnumberchangeOrigin:true,//是否跨域pathRewrite:{'^/api':'/'}}方案3（推荐）：安装http-proxy-middleware:npmihttp-proxy-middleware//oryarnyarnaddhttp-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":"",},}));};重新运行npmrunstart解决跨域总结提示：这里是文章的总结：例如：以上是Vue和React如何解决文章中的跨域问题，如果你觉得实用，可以点赞评论收藏三次~文章不定时更新，关注博主不要迷路~