vue之解决跨域问题

、、、、、、、、、、、仅对以前所学做复习记录使用、、、、、、、、、

同源策略：http协议、主机名、端口号都要相同。

因为浏览器同源策略的影响，向后端服务器请求数据的时候，不能进行访问。
可以采用代理服务器的方式，代理服务器：

浏览器向一个相同同源策略的代理服务器上请求资源，因为服务器之间没有同源策略，代理服务器就去找后端服务器请求资源，在返回给浏览器

解决方法一：

在根目录下新建vue.config.js文件，这里是js文件哈。

module.exports = {lintOnSave:false, // 取消格式化devServer:{proxy:"http://houduanserver:5000" // 请求数据的地址}
}

这个请求的时候，会先到public文件夹下查找资源，如果有的话就返回public文件夹下资源，如果没有就请求代理服务器资源。
这种方法只能请求一种代理

解决方法二：

module.exports = {lintOnSave:false, // 取消格式化devServer:{open:true,  // 当启动时自动打开浏览器proxy:{// 匹配以所有/api开头的请求路径，名字随意'/api':{target:"http://houduanserver:5000",// 请求服务器地址ws:true, // 用于支持websocket 默认truechangeOrigin:true , // 默认true// 设置为true时，后端服务器收到的是host名为：houduanserver:5000// 设置为true时，后端服务器收到的是host名为：houduanserver:8080pathRewrite:{ '^/api':“” },// 当后端服务器中没有以/api开头的路径时，以空字符代替              },      '/api2':{target:"http://houduanserver:5001",// 请求地址ws:true, // 用于支持websocket 默认truechangeOrigin:true , // 默认true// 设置为true时，后端服务器收到的是host名为：houduanserver:5000// 设置为false时，后端服务器收到的是host名为：houduanserver:8080pathRewrite:{'^/api2':' '},// 当后端服务器中没有以/api开头的路径时，以空字符代替               }}}
}

api意思是只要以/api开头的就直接请求代理服务器再到后端服务器。不像方法一中那样，去请求public文件夹，在去请求代理到后端服务器。

pathRewrite是当浏览器通过请求/api/data到代理服务器，代理服务器再去请求后端服务器，然而后端服务器没有/api/data路径，只有/data路径，所以找不到/api只好为空

这种方法可以请求多种代理

在用axios请求资源时，一定要加上/api

vue之解决跨域问题相关推荐

vue脚手架解决跨域问题-------配置反向代理
vue脚手架解决跨域问题-------配置反向代理参考文章: (1)vue脚手架解决跨域问题-------配置反向代理 (2)https://www.cnblogs.com/zbx-boke/p/9 ...
vue脚手架解决跨域
vue脚手架解决跨域 1.什么是跨域 1.浏览器,端口,域名只要有一项不同就会产生跨域,协议域名端口都相同才同域,否则都是跨域 2.如何解决跨域 1.首先在vue脚手架的根目录下创建一个vue.con ...
vue porxy 解决跨域
porxy // 配置文件vue.config.js 是固定名 // 必须放在项目根目录下,与src同级别 module.exports = {//devServer:开发服务器配置项devServe ...
vue配置解决跨域问题
我们在使用vue时,经常要遇到跨域的问题,其实这个问题很好解决,只需我们在vue-cli中配置一下即可. 实现跨越请求: 在config文件夹下找到index.js proxyTable: {&quo ...
vue cli 解决跨域线上 nginx 反向代理配置
前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开 ...
【vue】解决跨域问题的原理
vue中的proxy主要作用类似于nginx: 将本地请求转发给跟随vue项目启动的本地服务: 然后由服务端去请求远程服务端:因为服务端请求服务端是没有跨域问题的: 而本地服务和本地H5资源,因为同源 ...
vue cli3解决跨域的两种方法
请去下面网站非常清晰:https://www.jianshu.com/p/eb3de95cfc82
Vue--使用webpack解决跨域问题：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
原文网址:Vue--使用webpack解决跨域问题:No 'Access-Control-Allow-Origin' header is present on the requested resour ...
vue开发环境和生产环境里面解决跨域的几种方法
vue开发环境和生产环境里面解决跨域的几种方法参考文章: (1)vue开发环境和生产环境里面解决跨域的几种方法 (2)https://www.cnblogs.com/pass245939319/p/ ...
【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...

vue之解决跨域问题

解决方法一：

解决方法二：

vue之解决跨域问题相关推荐

最新文章

热门文章