本文目录
- 在vue项目中配置proxy解决跨域问题
- 前端处理跨域请求（含vue的处理方式）
- vue3.0+nginx跨域问题
- vue-配置代理解决跨域
- 关于vue项目请求WCF服务跨域的问题（后台设置）
- 解决Vue http中的跨域问题
在vue项目中配置proxy解决跨域问题
1.问题： ***隐藏网址***2.解决方案： * 在webpack中配置proxy。如下图所示如上： ***隐藏网址*** ***隐藏网址*** 3. changeOrigin必须为true * 在页面中请求写法如下：开心吧。数据终于拿到啦！！！***隐藏网址***则需要在webpack中做如下配置：***隐藏网址***
前端处理跨域请求（含vue的处理方式）
通过vue-cli3.0创建的项目想要实现跨域请求操作 首先需要穿件配置文件vue.config.js 注意此文件创建在项目的根路径下面，不要创建在src下面 注意：vue-cli2.x脚手架搭建的项目处理跨域稍有同，注意区别！！！
vue3.0+nginx跨域问题
通过以上处理后跨域问题解决，但是通过nginx请求后台服务时一直报404错误。 然而访问路径是正确的并没有问题，并且通过postman或者浏览器直接访问时能正常返回。
一开始以为是跨域配置有问题，网上找了很多方法都解决不了。 最后通过逐一对比postman和实际请求发现，请求header中多了一个 referer 。
将这个属性加到postman请求中果然也报404。由此定位是referer问题。 这个可以理解为白名单，可以限制允许指定的来源地址访问。我这里就直接去掉了。
既然定位到问题，就好处理了，在public下的index.html中添加如下标签（可以在使用到的页面添加）：
再次发送请求不携带referer，请求成功！
vue-配置代理解决跨域
***隐藏网址*** 1.让后台帮忙配置,一下是node实现 2.前端配置代理（在前端请求node服务器，node服务器再帮我们发送真正的请求）
关于vue项目请求WCF服务跨域的问题（后台设置）
项目中要求使用WCF服务获取手机号验证码和验证验证码两个接口。因为浏览器的同源策略，调试中发现报错跨域，与后台沟通后设置： 在其他非vue项目的服务环境下调试接口正常，但本项目中发现还是报错： 找了许久，还需后台配置白名单： 至此，跨域问题解决。 另外，跨域问题分很多种，只要仔细分析报错问题就会有解决的办法。
解决Vue http中的跨域问题
在平常的项目开发当中，很容易遇到跨域的问题，好在vue-cli的脚手架提供了跨域的解决方案，在config下的index.js中有个proxyTable属性，在其中添加如下配置: proxyTable: { ’/api’:{ ***隐藏网址*** changeOrigin:true, pathRewrite:{ } } 如上所示，如果在8090后在加路径，则无效（亲测）； 在pathRewite中可以添加替换，因为在正常代理过后会在路径结尾有ap这个路径，所以如果实际的地址和这个不同，则可以进行替换。
