Nginx的跨域问题解决
主要从以下方面进行解决：
1.什么情况下会出现跨域问题？ 2.具体的解决方案是什么? 复制代码
1.首先跨域指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。
2.浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问。
No 'Access-Control-Allow-Origin' header is present on the requested resource 复制代码
同源策略
浏览器的同源策略：是一种约定，是浏览器最核心也是最基本的安全功能，如果浏览器少了同源策略，则浏览器的正常功能可能都会受到影响。
同源: 协议、域名(IP)、端口相同即为同源
同源策略限制的情况：
1、Cookie、LocalStorage 和 IndexDB 无法读取
2、DOM 和 Js对象无法获得
3、AJAX 请求不能
跨域问题
简单描述下:
有两台服务器分别为A,B,如果从服务器A的页面发送异步请求到服务器B获取数据，如果服务器A和服务器B不满足同源策略，则就会出现跨域问题。 复制代码
解决方案
使用add_header指令，该指令可以用来添加一些头信息
| 语法 | add_header name value... |
|---|---|
| 默认值 | --- |
| 位置 | http,server,location |
此处用来解决跨域问题，需要添加两个头信息，一个是Access- Control-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; //设置允许GET,POST,PUT,DELETE方法 default_type application/json; return 200 '{"id":1,"name":"TOM","age":18}'; } 复制代码//设置允许全局跨域 location { add_header Access-Control-Allow-Origin *; //设置允许所有主机 add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE; //设置允许GET,POST,PUT,DELETE方法 default_type application/json; return 200 '{"id":1,"name":"TOM","age":18}'; }
作者：张哲溪
链接：https://juejin.cn/post/7027653581733888031