nginx解决跨域的方法
墨初 编程开发 2038阅读
最近在js脚本中请求自己建立的api时发生了跨域问题,查了一些关于跨域问题的资料,就想到了下面博文中所讲的在nginx中解决跨域问题的方法。
跨域问题
跨域的产生来源于现代浏览器所通用的‘同源策略’,也可以理解为只有在地址的协议,ip,端口都一样情况下,才允许访问相同的cookie、localStorage或是发送Ajax请求等等。若在不同源的情况下访问,就称为跨域.
在前后端分离的项目中,如果产生了跨域就会产生下面的错误提示。
No 'Access-Control-Allow-Origin' header is present on the requested resource
nginx解决跨域问题
在所请求的目录服网站的nginx中配置以下的参数即可解决跨域的问题。
nginx配置参数
location / { # 跨域设置 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Credentials' 'true'; if ( $request_method = 'OPTIONS' ) { return 200; } }
参数详解:
1、Access-Control-Allow-Origin
用于设置允许跨域请求源地址,也可以做为安全的保证,如果允许所有来源直接填写“*”即可,如果是单一个网址,直接输入网址即可!
2、Access-Control-Allow-Headers
跨域允许携带的特殊头信息字段,一般做为请求验证使用,但大多数的情况下可以省略!
3、Access-Control-Allow-Methods
允许跨域的方式,可以设置POST,GET有等方式提交。
4、Access-Control-Allow-Credentials
是否允许跨域使用cookies,如果要跨域使用cookies,可以添加上此请求响应头,值设为true(设置或者不设置,都不会影响请求发送,只会影响在跨域时候是否要携带cookies,但是如果设置,预检请求和正式请求都需要设置)。不过不建议跨域使用(项目中用到过,不过不稳定,有些浏览器带不过去),除非必要,因为有很多方案可以代替。