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