跨域的三种解决方案

Posted 2023-05-03

参考技术A 跨域问题的出现是由于浏览器为了防止csrf攻击，避免恶意攻击而采取的同源策略限制，也就是当一个页面使用XMLHTTPRequest对象发送HTTP请求时（XHR）,必须保证当前页面和请求的资源是同源的（即协议，域名和端口号要完全一致，否则浏览器就会阻止跨域请求返回额的数据）。

如何解决跨域的问题的呢， 有以下三种方案

1，代理的方案，将请求资源的操作通过一层代理，然后取回数据，再从代理层把数据返给浏览器，由于代理层和浏览器是同源的，这样就解决了跨域的问题（通常试用于node层）

2，放开服务端跨域限制，通过添加response的header的方法（参考header('Access-Control-Allow-Origin:*'); //允许所有来源访问  header('Access-Control-Allow-Method:POST,GET'); // 允许访问的方式）

3，JSONP的方式，JSONP方式的原理是将返回数据以资源的方式放在<script>标签里面返回，由于返回的不是JSON数据，就没有跨域的限制了，类似对页面添加的js引用，这样就解决了跨域的问题。但需要在服务端拼接结构，违背了restful的原则。

VUE本地跨域解决方案

参考技术A         我们前端使用接口时，时常遇到跨域问题，一般都是后台设置开放访问权限解决跨域，如果后台不配合或者为了安全问题而不能开放权限，那么我们前端只能自己解决跨域问题了！！！直接再问vue中使用nodeJS进行代理就可以解决跨域问题。

1、首先找到项目所在的config文件下的index.js，打开此文件；

2、找到module.exports里面的dev模块，dev: proxyTable: ;

将target设置成你想跨域的域名，

changeOrigin设置成true（即：允许跨域）；

pathRewrite设置新的路径，这个其实没有必要重新设置；

host设置成：localhost；

port设置成自己本地项目的端口号如：8001；

3、找到main.js并打开，添加：Vue.prototype.HOST = '/api' //设置全局的请求域名；这样就可以全局使用了！

4、在请求接口的页面这样请求接口就可以啦：

var urls = this.HOST +'/login/get/dingdingUser';//this.HOST就是你跨域的域名，这样就可以直接跨域了；这时urls就是你的接口名称啦！！！