配置Nginx和Apache允許指定域名CORS跨域訪問


 前后端分離開發,導致前端項目需要跨域請求后端接口,解決方法有很多,本文只介紹兩個:

1. 修改后端程序代碼實現允許跨域請求

2. 修改服務器配置文件實現允許跨域請求

 

正文:

 

方法1:修改后端程序代碼實現允許跨域請求 

以ThinkPHP為例,為了一勞永逸,直接在入口文件index.php中加入代碼:

header("Access-Control-Allow-Origin: *");  // 可以把星號換成指定域名帶http或https header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization"); header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS,PATCH');

 

方法2:修改服務器配置文件實現允許跨域請求

Nginx配置(實現了允許多個指定域名而不是允許所有域名)

在要允許跨域的站點配置的server段中添加代碼

server { #begin 允許指定域名跨域訪問,根據自己情況修改 #不要用tab代替空格  set $cors_origin ""; if ($http_origin ~* "^https://a.example.com$") { set $cors_origin $http_origin;  } #允許本地vue項目跨域訪問  if ($http_origin ~* "^http://localhost:8080$") { set $cors_origin $http_origin; } add_header Access-Control-Allow-Origin $cors_origin; #end 允許指定域名跨域訪問,根據自己情況修改 listen 80;     listen 443 ssl http2; ... }

Apache配置(本地開發環境是WAMPServer,所以也要讓本地的Apache也接受跨域請求)

在httpd.conf文件中解除LoadModule headers_module modules/mod_headers.so的注釋

在站點配置塊(可能是httpd-vhost.conf文件中)添加代碼

# <VirtualHost *:80> ServerName localhost.a DocumentRoot "e:/projects/a/www/public" <Directory "e:/projects/a/www/public/"> Options +Indexes +Includes +FollowSymLinks +MultiViews AllowOverride All Require local #上面的內容我們是不一樣的 #添加下面這行允許跨域訪問  Header set Access-Control-Allow-Origin * </Directory>
</VirtualHost>

 

注:我的nginx版本是1.16.0,apache版本是2.4.39,以上方法親測有效。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM