Nginx从入门到入坟（八）- Nginx的跨域问题

• 1. 同源策略
• 2. 跨域问题
• 3. 跨域问题的案例演示
• 4. 解决方案
• 参考文献

  浏览器的同源策略：是一种约定，是浏览器最核心也是最基本的安全功能，如果浏览器少了同源策略，则浏览器的正常功能可能都会受到影响。
  同源：协议、域名(IP)、端口相同即为同源。

http://192.168.200.131/user/1
https://192.168.200.131/user/1
非同源

http://192.168.200.131/user/1
http://192.168.200.132/user/1
非同源

http://192.168.200.131/user/1
http://192.168.200.131:8080/user/1
非同源

http://www.nginx.com/user/1
http://www.nginx.org/user/1
非同源

http://192.168.200.131/user/1
http://192.168.200.131:8080/user/1
非同源

http://www.nginx.org:80/user/1
http://www.nginx.org/user/1
同源

有两台服务器分别为A、B，如果从服务器A的页面发送异步请求到服务器B获取数据，如果服务器A和服务器B不满足同源策略，则就会出现跨域问题。

  接下来通过一个需求来给大家演示下出现跨域问题会有什么效果：

1. nginx 的 html 目录下新建一个a.html；

2. 在nginx.conf配置如下内容：

   server{
   	listen 8080;
   	server_name localhost;
   	location /getUser{
   		default_type application/json;
   		return 200 '{"id":1,"name":"TOM","age":18}';
   	}
   }
   server{
   	listen 80;
   	server_name localhost;
   	location /{
   		root html;
   		index index.html;
   	}
   }
   

3. 通过浏览器访问测试：
   

  使用add_header指令，该指令可以用来添加一些头信息。

  此处用来解决跨域问题，需要添加两个头信息，分别是AccessControl-Allow-Origin和Access-Control-Allow-Methods。
  Access-Control-Allow-Origin：直译过来是允许跨域访问的源地址信息，可以配置多个（多个用逗号分隔），也可以使用*代表所有源。
  Access-Control-Allow-Methods：直译过来是允许跨域访问的请求方式，值可以为 GET POST PUT DELETE…，可以全部设置，也可以根据需要设置，多个用逗号分隔。
  具体配置方式：

location /getUser{
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
	default_type application/json;
	return 200 '{"id":1,"name":"TOM","age":18}';
}

  执行./nginx -s reload命令重新加载配置，再次查看效果：

  【1】https://www.bilibili.com/video/BV1ov41187bq?p=61
  【2】jquery文件下载地址：https://jquery.com/download/