header设置跨域问题

//    使用通配符 * ，表示当前服务端 返回的信息允许所有源访问,也可指定可信任的域名来接收响应信息        

header("Access-Control-Allow-Origin: http://localhost:3000")

header("Access-control-Allow-Origin:*")

//    响应头设置为ajax提交        

header("Access-Control-Allow-Headers:X-Requested-With")

//    允许携带 用户认证凭据（也就是允许客户端发送的请求携带Cookie）        

header("Access-Control-Allow-Credentials:true")

写到方法内部

最近做了一个应用管理系统，采用前后端分离方式开发，前端使用了layuiadmin框架，后端使用了 .net web api，在开发过程中，遇到了ajax跨域问题及header自定义设置，这是所有前后端分离开发都需要解决的问题，在此做一个记录。

在前端ajax请求时，我们在header中设置了自定义的头部信息，将token写入了头部，便于后端进行身份认证， 如：xhr.setRequestHeader("Authorization", access_token)。通过了ajax全局方法做了统一处理。

在设置了自定义header后，浏览器到后端请求将分为两步进行。

浏览器将先发送一个预请求OPTIONS到后端，这里后端需要对OPTIONS请求做出正确响应，可以直接返回200状态码，不用返回内容信息。

浏览器接收到OPTIONS正确响应后会自动执行发送get或post请求。可此时依旧没有请求到后端数据，F12查看控制台输出，会发现报错了。这就是接下来要处理的跨域问题。

跨域的处理主要是服务器端设置响应头，针对.net web api 可直接在web.config文件中的<system.webServer>节点中进行设置，如图：

Access-Control-Allow-Origin //支持全域名访问，不安全，部署后需要固定限制为客户端网址

Access-Control-Allow-Methods //支持的http 动作

Access-Control-Allow-Headers //响应头 请按照自己需求添加

设置完成后，前端在chrome下调用api接口能正常相应，但在IE下依旧报错，如图：

最终发现，我们自定义设置了Authorization，在IE下，后端并没有给出相应的响应，原以为Access-Control-Allow-Headers设置为*，就能表示所有的响应头，但在IE下不行，需要将自己对应的需求以此设置。如图

设置完后，就可成功访问后端api。

一、在前端开发过程中，如果准备开发富应用，跨域的问题将会随之而来。

        我们先看看什么是跨域呢：

         所谓跨域，或者异源，是指主机名（域名）、协议、端口号只要有其一不同，就为不同的域（或源） 。出于保护用户数据的目的，浏览器有一个最基本的策略就是同源策略，只允许页面内的脚本访问当前域的资源（加载脚本、资源等不受此限制）。

二、如果浏览器厂商不对跨域请求进行处理，会给我们带来什么危害呢？

        有心人士（病毒制造者）会利用这个漏洞进行如下攻击：

        1. CSRF/XSRF 攻击 ，简单的来讲就是在 b.com 页面中请求 a.com 的接口（浏览器会自动带上 用户在 a.com 的 cookie），从而获取用户的在 a.com 的相关信息。

        2. XSS 注入攻击 ，类似于 SQL 攻击，提交含有恶意脚本的数据到服务器，从而达到破坏页面或者获取用户的 cookie。

三、我们了解到了什么是跨域，那我们又应该如何解决呢，现在找到了这些比较权威的文章，大家先品读一下：

        1. mozilla 官方网站关于跨域的文章（Cross Origin）， HTTP访问控制（CORS）

        2. mozilla 官方网站关于浏览器同源策略的简要介绍（Same Origin），  浏览器的同源策略

四、读完这些文章，你打算怎么处理跨域问题呢，我先谈谈自己关于跨域的解决方案：

        1. 采用 CORS 协议，直接在 Nginx 中设置允许跨域的 header（也可以在后端的应用程序内设置，不过在 Nginx 入口配置的话更加统一），在 location 配置中直接使用指令 add_header（ 官方文档链接 ），示例配置如下：

        2. 使用 JSONP，也是需要后端配合，利用“浏览器加载脚本、资源时不受同源策略的约束”这个特性，但是这种方式非常受限制，例如只能使用 GET 请求，不能携带自定义 header 等。

        3. 其他的一些方法，例如 window.name, document.domain 以及 HTML5 中的特性 window.postMessage 等

五、其他参考链接

        1.  浅谈JS跨域问题

        2. 跨域资源共享 CORS 详解----阮一峰

六、声明

        现在网络上的知识非常复杂，有些是摘自权威书籍的，有些是作者自己理解然后记录下来的，有些是瞎掰的，所以一定要结合情况多多甄别，对于有权威文档的知识点，建议先参考文档。

---