使用Nginx解决跨域问题

当存在多个域名时，两个不同的域名相互访问就会存在跨域问题。

或者在进行前端开发时，通常前端代码在本地启动，而后端代码会部署在一台专用的后端开发服务器上，此时前端去调用后端接口时，就会出现跨域问题。

解决跨域的方法有很多，今天来说一下如何使用Nginx来解决跨域问题。

假设后端服务器，是使用Nginx作为对外统一入口的，在Nginx配置文件的server块中增加如下配置：

# 允许跨域请求的域名，*代表所有
add_header 'Access-Control-Allow-Origin' *;
# 允许带上cookie请求
add_header 'Access-Control-Allow-Credentials' 'true';
# 允许请求的方法，例如：GET、POST、PUT、DELETE等，*代表所有
add_header 'Access-Control-Allow-Methods' *;
# 允许请求的头信息，例如：DNT,X-Mx-ReqToken,Keep-Alive,User-Agent等，*代表所有
add_header 'Access-Control-Allow-Headers' *;

重新加载Nginx就已经可以跨域访问了。

验证头信息中的 referer 参数

请求头信息中的 referer 参数，记录了上一个页面的地址，Nginx可以对其进行校验，达到防盗链的目的。

通常在配置文件的location块中增加配置。

server {
    listen       80;   # 端口
    server_name  zsyyblog.com;  # 服务名，可以是IP地址或者域名

    location / {   # 根路径
        root   html;  # 对应nginx安装目标下的html文件夹
        index  hello.html; # 指定首页为 hello.html
    }
 
    location ~* \.(GIF|PNG|jpg|bmp|jpeg) {  # *代表不区分大小写
        # 校验请求是否来自于 zsyyblog.com 这个站点，不是则返回404页面
        valid_referers *.zsyyblog.com;
        if ($invalid_referer) {
              return 404;
        }
        root /home/img;
    }
 
    error_page   500 502 503 504  /50x.html;  # 指定这些状态码跳转的错误页
    location = /50x.html {
        root   html;
    }
}