你今天跨域了吗？--CORS解决跨域

在使用浏览器发送请求的时候，常常会遇到跨域的问题，可是到如今也已经有了不少的解决方法。其中一个经典的方法就是跨域资源共享（Cross-Origin Resource Sharing）了，CORS使用额外的HTTP头部高数浏览器可让哪些地址进行跨域资源请求。

跨域产生的缘由

从字面意思来看，跨域就是跨域名，但它却有更深一层的含义。事实上，只要协议、域名、端口有任何一个不一样，都被视为不一样的域。若是没有跨域，就能随便引用外部文件，不一样标签下的页面若是能相互引用，浏览器也会摸不着头脑，安全上就得不到保障了。浏览器出于安全考虑限制跨域HTTP请求，这就是同源策略，因此后端须要设置请求头才能容许跨域。

利用CORS解决跨域

CORS的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是成功的仍是失败的。目前，全部的浏览器都支持该功能，IE浏览器须要IE10及以上的版本。整个CORS通讯过程，都是由浏览器自动完成的，不须要用户参与。因此开发者只须要在服务器中实现CORS接口，就能轻松解决跨域问题。

服务器端要想支持CORS，主要的配置是Access-Control-Allow-Origin，当浏览器检测到响应的设置时，就会容许跨域的访问。

http.createServer((req, res) => {
    //容许哪些客户端来访问
    res.setHeader('Access-Control-Allow-Origin',
    "http://127.0.0.1:5500")
复制代码

在服务器端配置了这段代码后，咱们就能容许本地的5500端口进行跨域访问了。固然，咱们能够经过更详细的配置，来确保跨域通讯的安全。 以下：

const http = require('http')
http.createServer((req, res) => {
    //容许哪些客户端来访问
    res.setHeader('Access-Control-Allow-Origin',
    "http://127.0.0.1:5500")
    //容许能够添加那些头，而后来访问
    res.setHeader('Access-Control-Allow-Headers',
    "token,xxx")
    //容许那些方法来访问
    res.setHeader('Access-Control-Allow-Methods',
    "OPTIONS")
    //能够每隔半小时，来发送一个option请求
    res.setHeader('Access-Control-Max-Age',
    '1800')
    if(req.method ==="options"){
        return res.end()
    }
    if (req.url == "/api") {
        res.end(JSON.stringify({ name: 'wangcai' }))
    }
}).listen(3000)
复制代码

在html页面中能够作相应的配置

<script> fetch("http://localhost:3000/api", { method: 'GET', headers:{ token:'xxx' } }).then(res => { return res.json() }).then(json => { console.log(json) }) </script>
复制代码

简单的总结了一下CORS。对于先后端分离开发来讲，跨域请求是咱们必须解决的问题，在面试中跨域问题的解决方法也是必需要掌握的，早期通常是使用JSONP来解决，可是JSONP有着较大的局限性，只能实现GET请求，相比之下，COSR有着更大的灵活性，已经成为如今解决跨域的主流方法，以上。。。