51工具盒子使用Nginx解决跨域问题 {#使用Nginx解决跨域问题}
当存在多个域名时，两个不同的域名相互访问就会存在跨域问题。
或者在进行前端开发时，通常前端代码在本地启动，而后端代码会部署在一台专用的后端开发服务器上，此时前端去调用后端接口时，就会出现跨域问题。
解决跨域的方法有很多，今天来说一下如何使用Nginx来解决跨域问题。
假设后端服务器，是使用Nginx作为对外统一入口的，在Nginx配置文件的server块中增加如下配置：
|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 | # 允许跨域请求的域名，*代表所有 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-参数}
请求头信息中的 referer 参数，记录了上一个页面的地址，Nginx可以对其进行校验，达到防盗链的目的。
通常在配置文件的location块中增加配置。
|---------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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; } } |
参考链接：https://blog.csdn.net/qq_39940205/article/details/120172446
