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

3,666 阅读2分钟

在使用浏览器发送请求的时候,经常会遇到跨域的问题,但是到现在也已经有了很多的解决方法。其中一个经典的方法就是跨域资源共享(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有着更大的灵活性,已经成为现在解决跨域的主流方法,以上。。。