如何解决跨域问题

Posted 2021-02-20

解决跨域三种方法

  什么是跨域，为什么要解决跨域。根据浏览器的同源策略。当浏览器不能响应执行网站的脚本时候，首先想到第一个问题点是否存在跨域问题。就是所谓同源策略，何为同源就我们经常上网是通过网址访问网站。而网址就由 www(协议)，子域名 、主域名，加端口号组成。当访问的地址的这几个部分不同就会产生跨域。通常由于端口的不同造成跨域问题。浏览器同源策略根据安全考虑。解决跨域问题有三种方法。包括有jsonp(只局限于get请求方式)、nginx配置代理模式、服务器端跨域共享CORS。
  一、jsonp解决跨域是javascript代理模式，它是实现原理是通过动态在html页面中插入<script>标签,在发送带网址的请求，但只适用get请求。
  例如jquery实现方式

/**jquery实现方式/
$.ajax({
url:‘http://www.xxx.com/login‘,
type:‘GET‘,
dataType:‘jsonp‘,//请求方式为jsonp
jsonpCallback:‘callback‘,
})
function callback(res) {
console.log(res);
}

  二、nignx反向配置域名、端口

实现原理：
既然浏览器有同源策略规则，也属于一种安全策略，我们就必须规则。但是它不是http的一部分。我们只需要使用nginx配置一可以使用地址。这个地址对于服务器端能代理端口，而原理本地址无需改变，浏览器访问使用代理的地址。也可以访问到服务。

 具体配置：

#proxy服务器

server {

listen      81;

server_name  www.domain1.com;

location / {

    proxy_pass  http://www.domain2.com:8080;  #反向代理这是代理地址
    proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
    index  index.html index.htm;
    # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
    #add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
    add_header Access-Control-Allow-Credentials true;

}

}

三、CORS跨域
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限。有三种请求凡是head、get、post。根据复杂程度→分简单请求和复杂请求。
（1）简单请求
1、 请求方法是以下三种方法之一：
HEAD
GET
POST
2、HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
如果同时满足上面这两个条件就复杂请求。

对解决简单请求的跨域：
    <script>
    var url = ‘http://www.lishanlei.cn/CorsTest/CorsTest.php‘;
    var xhr = new XMLHttpRequest();
    xhr.open(‘get‘, url, true);
    // xhr.setRequestHeader(‘X-Custom-Header‘, ‘value‘);
    xhr.send();
    </script>
    注意若在设置header时候带有原始Orign字段，说明是一种跨域请求。
对解决复杂请求的跨域：
 方法步骤复杂这里大概步骤不具体分析服务器端处理机制

服务器对于跨域请求的处理流程如下：

首先查看http头部有无origin字段；
如果没有，或者不允许，当成普通请求；
如果有且是允许的，再看是否是preflight(method=OPTIONS);
如果不是preflight(简单请求)，返回Allow-Origin,Allow-Credential等字段，并返回正常内容；
如果是preflight(非简单请求)，返回Allow-Headers,Allow-Methods等；
配置CORS规则
apache上配置CORS规则
Apache需要使用mod_headers模块来激活HTTP头设置，默认是激活的，只需要修改Apache配置文件中的/etc/apache2/sites-available/000-default.conf
1 开启模块
sudo a2enmod headers
2 编辑配置文件
sudo vi /etc/apache2/sites-available/000-default.conf
3 在虚拟主机Directory设置下添加
Header set Access-Control-Allow-Origin *

总结：
除了上面提到三种跨域请求外，还有其他许多解决跨域方法
比如window.name + iframe 、location.hash + iframe等几种不同的方式，上面三种比较通用方式。