为什么会有跨域的问题出现，如何解决跨域问题

Posted 2021-09-04 工具人-小不点

为什么会有跨域的问题出现，如何解决跨域问题

什么是跨域

​ 定义: 跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

​ 指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的,是浏览器对
javascript 施加的安全限制，防止他人恶意攻击网站.

​ 比如一个黑客,他利用 iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户
名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中输
入的内容,这样用户名和密码就轻松到手了。

什么是同源策略

​ 同源策略 是客户端脚本（尤其是 Javascript）的重要的安全度量标准。它最早出自 Netscape
Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是：协议，
域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和
文档的属性

解决方式

1、jsonp

1.1）去创建一个 script 标签

1.2）script 的 src 属性设置接口地址

1.3）接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。

1.4）通过定义函数名去接收后台返回数据

//去创建一个 script 标签 
var script = document.createElement("script"); 
//script 的 src 属性设置接口地址 并带一个 callback 回调函数名称
script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback"; 
//插入到页面 
document.head.appendChild(script); 
//通过定义函数名去接收后台返回数据 
function jsonpCallback(data){ 
//注意 jsonp 返回的数据是 json 对象可以直接使用 //Ajax 取得数据是 json 字符串需要转换成 json 对象才可以使用。 
}

2、 CORS：跨域资源共享

​ 原理：服务器设置 Access-Control-Allow-OriginHTTP 响应头之后，浏览器将会允许跨域请求
​ 限制：浏览器需要支持 html5，可以支持 POST，PUT 等方法兼容 ie9 以上,需要后台设置

2.1）跨域请求后的响应头中需要设置

2.2）Access-Control-Allow-Origin 为发起请求的主机地址

2.3）Access-Control-Allow-Credentials，当它被设置为 true 时，允许跨域带 cookie，但此时 Access-Control- Allow-Origin 不能为通配符*

2.4）Access-Control-Allow-Headers，设置跨域请求允许的请求头

2.5）Access-Control-Allow-Methods，设置跨域请求允许的请求方式

Access-Control-Allow-Origin: * //允许所有域名访问，或者
Access-Control-Allow-Origin: HTTP://a.com //只允许所有域名访问

3、反向代理

3.1)使用 vue-cli 脚手架搭建项目时 proxyTable 解决跨域问题

//打开 config/index.js,在 proxyTable 中添写如下代码：
//会拦截到/api的请求代理到目标服务器 http://f.apiplus.cn/xxx
proxyTable: {  
    '/api':{ 
        target: 'http://f.apiplus.cn', //目标服务器地址
        changeOrigin: true, //改变源,是否跨域
        pathRewrite: { 
        	'^/api': '/xxx' //路径重写,重定向
        }
    }
}

4.window+iframe

​ 需要目标服务器响应window.name

5.nginx反向代理解决跨域问题

​ 找到nginx的配置文件“nginx.conf”，修改一下信息.

server {
        listen       80; #监听80端口，可以改成其他端口
        server_name  localhost; # 当前服务的域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://localhost:81;
            proxy_redirect default;
        }

		location /apis { #添加访问目录为/apis的代理配置
			rewrite  ^/apis/(.*)$ /$1 break;
			proxy_pass   http://localhost:82;
       }
#以下配置省略

配置解释：

1.由配置信息可知，我们让nginx监听localhost的80端口，网站A与网站B的访问都是经过localhost的80端口进行访问。

2.我们特殊配置了一个“/apis”目录的访问，并且对url执行了重写，最后使以“/apis”开头的地址都转到“http://localhost:82”进行处理。

3.rewrite  ^/apis/(.*)$ /$1 break; 

代表重写拦截进来的请求，并且只能对域名后边以“/apis”开头的起作用，例如www.a.com/apis/msg?x=1重写。只对/apis重写。

　　rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。

　　break代表匹配一个之后停止匹配。