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

什么是跨域

​ 定义: 跨域是指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代表匹配一个之后停止匹配。

1、浏览器限制

2、跨域（协议，域名，端口不一样都是跨域）

3、XHR（XMLHttpRequest请求）

同时满足三个条件才有可能产生跨域问题。

解决跨域问题方案。

1，从浏览器出发，允许浏览器跨域。

2，从XHR（XMLHttpRequest）出发

    （1）避免发生跨域。使用jsonp，由于jsonp请求是通过script的方式发送的（只有xhr的请求方式才有可能产生跨域问题），所以不会产生跨域问题。Spring MVC实现过程：前台使用ajax的get请求，将dataType设为“jsonp”；服务器创建一个类并继承抽象类AbstractJsonReponseBodyAdvice,最后注解@ControllerAdivece。使用jsonp的弊端，只能使用get方式请求，服务器需要改动代码，发送的不是xhr请求。

    （2）产生跨域后解决。

            从被调用方考虑，有三种情况，分别是服务器实现，nginx配置和apache配置。

            服务器实现需要注意两种情况，简单请求和非简单请求。简单请求是先执行请求再验证，非简单请求是先验证再请求。

          简单请求（比较常见）：方法为get，head，post,请求header里面没有自定义头，Content-Type的值为以下几种 text/plain,multipart/form-data,application/x-www-form-urlencoded。

            非简单请求（比较常见）：put,delect方法的ajax请求，发送json格式的ajax请求，带自定义头的ajax请求。

            简单请求处理方案：在响应头中添加

                Access-Control-Allow-Origin=“允许跨域的url”，即跨省域时，请求头Origin的值，所以一般是获取Origin的值。

                Access-Control-Allow-Method=“*”，允许的方法。

            非简单请求处理方案：在相应头中添加

                Access-Control-Allow-Origin=“允许跨域的url”，即跨域时，可以获取请求头Origin的值。

                Access-Control-Allow-Method=“*”，允许的方法

                Access-Control-Request-Headers=“Content-Type,自定义的header的key”。

             带cookies的跨域解决：在响应头添加

                Access-Control-Allow-Credentials,="true"，允许使用cookies

               ngnix配置：

apache配置：没搞过

若是使用spring框架：使用@CrossOrigin注解既可以实现服务端跨域

一、跨域

1、为什么会产生跨域

答：因为浏览器的同源政策，就会产生跨域。比如说发送的异步请求是不同的两个源，就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑，就会产生一个同源政策，不是同一个地方出来的是不允许进行交互的。

2、怎么解决跨域

解决跨域的方法：第一种jsonp的方法。第二种使用CORS解决跨域问题，即跨域资源共享，在后端设置响应头部，加一句代码：access-control-allow-origin:"*"或者允许交互的域名。第三种使用vue，找到config文件下->index.js文件，修改propyTable中的target的值，就可实现用前端解决跨域。第四种，使用代理；第五种，使用postmessage

1、jsonp方法：

jsonp是一种借助于 script 标签发送跨域请求的技巧方案。script的src属性可以访问网络上的资源，并script标签可以拿到响应体。

<script>
    function test(json){
        console.log('我被调用了');
        console.log(json);
   }
</srcipt>
<script src="http://api.douban.com/v2/movie/top250?callback=test"></script>

我们可以看到，我们预先定义了一个函数叫test，再然后在src里加了一个参数callback=test，可以发现，当请求完成，会自动调用test这个函数，并且把响应体（JSON数据）当做参数传递过来.实际上是浏览器用script的src去发起请求，并且传递一个参数叫callback=函数名，服务器接收到这个函数名，在返回的响应体里面调用这个函数，并且把json当做参数传递.
注意:(1).Jsonp不是一套新技术，只是聪明的程序员想出的一套方案
(2)能不能用这套方案，要看服务器端代码怎么写，服务器端如果写了调用函数的代码，那么就能支持JSONP方案.

如果是在JQuery中使用Ajax,则只需要在dataType属性中把json改为jsonp即可;

2、后端处理跨域方法：使用cors解决跨域问题，即跨域资源共享，设置响应头。

<?php 
    $json = array("name"=>"jack","age"=>16);
    //代表告诉浏览器，我允许任意域名访问我这个接口
    //如果写一个*，代表所有域名都可以来访问我
    // header('Access-Control-Allow-Origin: *');
    //如果写的是指定域名，代表只有这个域名可以访问
    header('Access-Control-Allow-Origin: *');
    echo json_encode($json);
?>

3、前端跨域方法：使用vue

找到config文件下->index.js文件，修改propyTable中的target的值。

proxyTable: {
“/api”: {
target: “http://localhost:8080”,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
}

4、iframe嵌套通讯，postmessage

HTML5引入了一个全新的API：跨文档通信 API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。

本文部分参考：https://blog.csdn.net/sinat_28296757/article/details/80771082