云计算服务
服务器租用
DDOS 防护
虚拟主机
域名服务
基础设施
关于我们
title: has been blocked by CORS policy跨域问题解决
我们在前端调用接口时，浏览器有时候会报错：
XXXX form XXXX Xhas been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is XXXX
这时候就是因为CORS保护问题阻止了我们的访问
一、什么是跨域出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的。javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port)。
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
二、如何解决返回header头Access-Control-Allow-Origin
我们需要服务端返回
access-control-allow-origin: 你的URL
Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。
这里的URL为你的访问端，可以设置*作为通配符，即所有域名都可以访问
Access-Control-Allow-Origin: *
`nginx
add_header access-control-allow-origin *;
`
`nginx
location /api {
add_header access-control-allow-origin *;
if ($request_method = 'OPTIONS') {
return 204;
}
}
`
`nginx
location ~ .*.(jpg|avi|png)?$
{
add_header access-control-allow-origin *;
if ($request_method = 'options') {
return 204;
}
}
`
在 httpd-vhosts.conf 添加
<VirtualHost *:80>
DocumentRoot /data/www/test
ServerName test.com
Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Credentials true
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
<Directory />
Options FollowSymLinks ExecCGI Indexes
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
在入口文件加入一行
header("Access-Control-Allow-Origin: *");
.png)
.png)
