共计 1463 个字符,预计需要花费 4 分钟才能阅读完成。
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 配置跨域
- 间接全局配置,在 server{}里间接增加一行
`
nginx
add_header access-control-allow-origin *;
`
- 为指定 URL 配置
`
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;
}
}
`
Apache 配置跨域
在 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>
PHP 配置跨域
在入口文件退出一行
header("Access-Control-Allow-Origin: *");