跨域问题分析

代码这种东西就是得不断的使用，如果长时间不用就会生疏。今天偶然间，有人问我跨域的原理和怎么解决，说了一下，但是总是感觉还是差了点什么，特此温习一下。

跨域的产生

最根本的原因就是浏览器的同源策略，所谓"同源"指的是"三个相同" 协议相同、域名相同、端口相同，违反一个就会产生跨域问题。

请求的分类（简单请求和非简单请求）

• 请求方法是以下三种方法之一：HEAD,GET,POST；
• HTTP的头信息不超出以下几种字段：
  Accept
  Accept-Language
  Content-Language
  Last-Event-ID
  Content-Type(只限于三个值application/x-www-form-urlencoded、 multipart/form-data、text/plain)
  凡是不同时满足上面两个条件，就属于非简单请求。

解决跨域问题的方式

• JSONP 方式
• 代理请求方式
• CORS 方式

1、JSONP 方式 (只能是 get )

• 实现原理

  
  image.png

• 客户端网页通过添加一个

function addScriptTag(src){
    var script = document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.src = src;
    document.body.appendChild(script);
}

window.onload = function (){
    addScriptTag('http://example.com/ip?callback=foo');
}

function foo (data) {
    console.log('response data:'+JSON.stringify(data));
}

请求时，接口地址是作为构架出的脚本标签的src的，这样，当脚本标签构建出来时，最终的src是接口返回的内容；

• 服务器端对应的接口在返回参数外面添加函数包裹层
  foo({ 'test':'testData' });

2、CORS 方式

cors是一个W3C标准，全称是--跨域资源共享，其实所有的浏览器ajax请求都是基于CORS机制的，只是我们可能平时并不关心而已（所以说其实现在CORS解决方案主要是考虑后台该如何实现的问题 )。

3、方向代理

通过把本地一个url前缀映射到要跨域访问的web服务器上，就可以实现跨域访问。

ajax跨域的表现

• 第一种
  No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 404
  原因：本次请求时‘非简单请求’，所以请求会预先发送一个options请求；但是服务器端没有允许options请求，导致无法找到对应的接口地址
  解决方案：服务器允许options请求
• 第二种
  No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 405
  原因：后台方法允许OPTIONS请求,但是一些配置文件中(如安全配置),阻止了OPTIONS请求,才会导致这个现象。
  解决方案: 后端关闭对应的安全配置。
• 第三种
  No 'Access-Control-Allow-Origin' header is present on the requested resource,并且status 200。
  原因：服务器端后台允许OPTIONS请求,并且接口也允许OPTIONS请求,但是头部匹配时出现不匹配现象；
  解决方案: 后端增加对应的头部支持
• 第四种
  heade contains multiple values ','
  原因：后台响应的http头部信息有两个Access-Control-Allow-Origin:，服务器端在项目的配置文件中配置了一次origin，然后在代码中有手动的添加了一次origin
  解决方案：建议删除代码中手动添加的，只用项目配置中的即可