vue开发中的跨域问题怎么解决呢

isangle
331 阅读2分钟

一、调用后端服务跨域

这个基本都知道了
方式一：（上策）
①调用服务url不写前面的xx.xx.xx.xx:xx/只写后面地址,vue.…
②发版时需要配置nginx,问题是有时候遇到机智项目组没用docker，而且发版当天才让你临时安装nginx,临时写配置容易出多个斜杠少个斜杠的错

location /xx/ {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        proxy_pass http://xx.xx.xx.xx:xx/;
        proxy_read_timeout 300s;
        proxy_hide_header Set-Cookie;
    }

方式二：（下策）
①请求后端改下代码允许跨域。
②前端调用服务的时候写死。
③每次发版时，前端的服务地址要改成对应的地址，而且大概率会检测出后端代码有安全问题哈哈

下面都是特殊情况了，因为我们有一个叫融合4A的东西，一般是用不到的

二、使用地图跨域怎么办（地图资源服务器能访问，用户无法访问的情况）

地图开放平台比较知名的是高德百度啥啥啥，但是我们用到是亚信的gis
1、报错的普通使用方案
①在index.html写入
<script type='text/javascript' src='http://xx.xx.xx.xx:xx/xx/xx/xx.js'></script>
②使用时
Ai.TileLayer('xx.xx.xx.xx:xx/arcgis/rest…')
其一，这个Ai.TileLayer其实是发送get或者post请求于是就提示跨域了
其二，这种情况是 用户-》xx.xx.xx.xx:xx ，为了安全，不让用户访问地图资源，于是出错了 2、修改后 ①在index.html写入
<script type='text/javascript' src='/proxy'+'/xx/xx/xx.js'></script>
②使用时
Ai.TileLayer(window.origin +'/proxy'+'/arcgis/rest/services/map/China_BaseMap/MapServer') ③vue.config.js配置proxy
④发版时需要配置nginx
跨域通过配置修改，而且
这种情况是 用户-》服务器-》xx.xx.xx.xx:xx ，用户能访问服务器，服务器也能访问地图资源于是问题解决

三、后端部分服务只有测试环境能用，但本地调用不到测试环境的后端（后端的本机启动的服务用不了）

这个情况只能通过调用测试环境nginx的配置的proxy来调用测试后端，但是我这边用postman能调通这个，vue写proxy调用不了。
于是解决方案是：
1、直接调用nginx的web（不用proxy）
2、关闭浏览器安全策略，我这使用了chrome ①在D盘建立文件夹，名为MyChromeDevUserData （要叫别的也行） ②在桌面加个chrome的快捷方式，右键属性，修改目标，在双引号后面空格，输入
--disable-web-security --user-data-dir=D:\MyChromeDevUserData 然后应用确定，就ok了

avatar
文章
阅读
粉丝