关于apache: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: 你的 URL

Access-Control-Allow-Origin 是 HTML5 中定义的一种解决资源跨域的策略。

这里的 URL 为你的拜访端，能够设置 * 作为通配符，即所有域名都能够拜访

Access-Control-Allow-Origin: *

Nginx 配置跨域

1. 间接全局配置，在 server{}里间接增加一行

   `nginx

   add_header access-control-allow-origin *;

   `

2. 为指定 URL 配置

   `nginx

   location /api {

       add_header access-control-allow-origin *;

       if ($request_method = ‘OPTIONS’) {

               return 204;

       }

   }

   `

3. 为某种资源配置

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