vlambda博客
学习文章列表

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-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}'; 

}