前后端分离开发,导致前端项目需要跨域请求后端接口,解决方法有很多,本文只介绍两个:
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,以上方法亲测有效。