ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

has been blocked by CORS policy跨域问题解决

2022-08-24 17:35:01  阅读:219  来源: 互联网

标签:Control Origin 跨域 been Access header Allow CORS



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配置跨域

  1. 直接全局配置,在server{}里直接添加一行

```nginx

add_header access-control-allow-origin *;

```

  1. 为指定URL配置

```nginx

location /api {

add_header access-control-allow-origin *;

if ($request_method = 'OPTIONS') {

return 204;

}

}

```

  1. 为某种资源配置

```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: *");

标签:Control,Origin,跨域,been,Access,header,Allow,CORS
来源: https://www.cnblogs.com/cxfs/p/16620920.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有