PHPIN.NET

 找回密码
 立即注册
查看: 217|回复: 0

[其他相关] No Access-Control-Allow-Origin 跨域错误解决

[复制链接]

466

主题

497

帖子

5118

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5118
发表于 2021-3-18 16:30:35 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
No Access-Control-Allow-Origin 跨域错误解决

什么是跨域访问
在A网站中,我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的。跨域访问违反了同源策略,
同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源(相同域名或IP)的资源。

跨域

跨域



如何确定是跨域请求
  • A域名资源请求到B/C……域名
  • 你当前访问的域名是http的当请求的部分资源是https的
  • 当使用ajax访问远程服务器时,请求失败,浏览器报如上错误。这是出于安全的考虑,默认禁止跨域访问导致的。

如果是跨域访问,这时候就会报错

has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

错误场景如:Fonts –No 'Access-Control-Allow-Origin',已经提示我字体文件请求http url跨域了,然后根据我用的服务环境设置如下就行:
跨域访问解决
Apache
<IfModule mod_headers.c>
<FilesMatch "\.(svg|ttf|otf|eot|woff|woff2)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

Nginx
  1. location ~* \.(eot|ttf|woff)$ {
  2.    add_header Access-Control-Allow-Origin '*';
  3. }
复制代码

Access-Control-Allow-Origin:* 表示允许任何域名跨域访问。

扩展
  1. server {
  2.   listen        80;
  3.   server_name   uedbox.com;


  4.   location / {

  5.     # Simple requests
  6.     if ($request_method ~* "(GET|POST)") {
  7.       add_header "Access-Control-Allow-Origin"  *;
  8.     }

  9.     # Preflighted requests
  10.     if ($request_method = OPTIONS ) {
  11.       add_header "Access-Control-Allow-Origin"  *;
  12.       add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
  13.       add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
  14.       return 200;
  15.     }

  16.     ....
  17.     # Handle request
  18.     ....
  19.   }
  20. }
复制代码

你还可以动态配置跨域方案
  1. set $cors '';
  2. if ($http_origin ~ '^https?://(localhost|www\.yourdomain\.com|www\.yourotherdomain\.com)') {
  3.         set $cors 'true';
  4. }

  5. if ($cors = 'true') {
  6.         add_header 'Access-Control-Allow-Origin' "$http_origin" always;
  7.         add_header 'Access-Control-Allow-Credentials' 'true' always;
  8.         add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
  9.         add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
  10.         # required to be able to read Authorization header in frontend
  11.         #add_header 'Access-Control-Expose-Headers' 'Authorization' always;
  12. }

  13. if ($request_method = 'OPTIONS') {
  14.         # Tell client that this pre-flight info is valid for 20 days
  15.         add_header 'Access-Control-Max-Age' 1728000;
  16.         add_header 'Content-Type' 'text/plain charset=UTF-8';
  17.         add_header 'Content-Length' 0;
  18.         return 204;
  19. }
复制代码


不改动服务配置跨域解决

  1. <?php
  2. $ret = array(
  3.     'name' => isset($_POST['name'])? $_POST['name'] : '',
  4.     'gender' => isset($_POST['gender'])? $_POST['gender'] : ''
  5. );

  6. header('content-type:application:json;charset=utf8');
  7. header('Access-Control-Allow-Origin:*');
  8. header('Access-Control-Allow-Methods:POST');
  9. header('Access-Control-Allow-Headers:x-requested-with,content-type');

  10. echo json_encode($ret);
  11. ?>
复制代码

如果需要指定某域名才允许跨域访问,只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名,例如:
  1. header('Access-Control-Allow-Origin:https://www.phpin.net');
复制代码

如果需要设置多个域名允许访问,那么把多个域名放在数组中就可以,例如:
  1. <?php
  2. $ret = array(
  3.     'name' => isset($_POST['name'])? $_POST['name'] : '',
  4.     'gender' => isset($_POST['gender'])? $_POST['gender'] : ''
  5. );

  6. header('content-type:application:json;charset=utf8');

  7. $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';

  8. $allow_origin = array(
  9.     'https://www.uedbox.com',
  10.     'https://www.uedbox.com'
  11. );

  12. if(in_array($origin, $allow_origin)){
  13.     header('Access-Control-Allow-Origin:'.$origin);
  14.     header('Access-Control-Allow-Methods:POST');
  15.     header('Access-Control-Allow-Headers:x-requested-with,content-type');
  16. }

  17. echo json_encode($ret);
  18. ?>
复制代码

至此,No 'Access-Control-Allow-Origin'问题解决!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2021-6-13 12:46

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表