has been blocked by CORS policy跨域问题解决
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是HTML5中定义的一种解决资源跨域的策略。
这里的URL为你的访问端,可以设置*作为通配符,即所有域名都可以访问
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 添加
PHP配置跨域
在入口文件加入一行
__EOF__

本文链接:https://www.cnblogs.com/cxfs/p/16620920.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库