今天使用vue发送Ajax请求时发现,请求不到数据,打开浏览器控制台发现报已拦截跨源请求:同源策略禁止读取位于 http://vue.studyit.io/api/get/lunbo 的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-Origin’) 的错误
在这里插入图片描述
后面百度了一下CORS,CORS是一种允许当前域(domain)的资源(比如html/js/web service)被其他域(domain)的脚本请求访问的机制,通常由于同域安全策略(the same-origin security policy)浏览器会禁止这种跨域请求。 简单的理解就是为了安全原本不同的域(协议、域名、端口其中一个不同)之间不能进行Ajax交互,通过CORS可以跨域使用Ajax,
使用CORS需要在响应头部加上Access-Control-Allow-Origin属性
例如

Access-Control-Allow-Origin:*

*代表所有网址都可以给我发送Ajax请求,不过不推荐这样使用,不安全。
如果只想某个某个网站能给我发送Ajax请求,把*改成对应网址就可以了
例如:要允许https://amazing.site上的站点使用CORS访问(自己的服务器)资源,这个http头应该为

Access-Control-Allow-Origin: https://amazing.site
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐