如何解决跨域问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何解决跨域问题相关的知识,希望对你有一定的参考价值。

解决跨域三种方法

  什么是跨域,为什么要解决跨域。根据浏览器的同源策略。当浏览器不能响应执行网站的脚本时候,首先想到第一个问题点是否存在跨域问题。就是所谓同源策略,何为同源就我们经常上网是通过网址访问网站。而网址就由 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等几种不同的方式,上面三种比较通用方式。

以上是关于如何解决跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

如何解决ajax跨域问题(转)

如何解决ajax跨域问题(转)

如何解决ajax跨域问题(转)

如何解决IE8下Ajax调用时跨域的问题

跨域请求如何携带cookie?不小心都拿了Offer

前后端分离实践 — 如何解决跨域问题