前端跨域之nginx配置跨域问题

 

一、前端跨域问题

　　前端跨域出现在前端得同源策略上，只有满足：协议、域名、端口相同得情况下才是同源，即可以调用对方资源，否则，浏览器端，F12的console会报错：Access_Control_Allow_Origin的问题；

前端地址:http://www.baidu.com	是否跨域	原因
http://www.baidu.com/home	否	域名、协议、端口都相同
https://www.baidu.com/home	是	协议不同
http://www.jd.com/	是	域名不同
https://www.jd.com	是	协议、域名都不同

 

 

 

 

 

 

 

 

二、跨域解决的方法

　  1、后端授权：CORS;

　　2、jsonp：利用html标签的中src等不受同源策略影响的漏洞

　　3、nginx代理配置；

三 、利用nginx配置，解决前端跨域问题

　　

//打开nginx的配置文件
vim  nginx.conf

//在指定的代理位置进行设置如下代码
location ^/home {
        add_headeer ‘Access_Control_Allow_Origin’  ’*.huawei.com‘  //控制的域名范围
        add_header 'Access_Control_Allow_Credentials' 'true'
        add_headeer ‘Access_Control_Allow_Method’  ’GET，POST，PUT，DELETE，HEAD，OPTIONS‘   //控制的请求方法
}        

【注释：Access_Control_Allow_Origin      这些请求信息，首字符是否大写，要根据F12中的报错提示，前端报错是小写，在配置过程中，就用小写字母】

 

  配置完成之后，在浏览器的ResponseHeader中会有Access_Control_Allow_Origin头部信息

 

四、nginx 配置手动清除缓存

location ~ /purge(/.*) {
allow 127.0.0.1;
allow 192.168.50.0/24;
deny all;
proxy_cache_purge whsir_com $host$1$is_args$args;
}

接下来我们来清除缓存，只需要在清除缓存网页的URI地址前加上purge即可

http://192.168.50.101/purge/