11、在Nginx中解决跨域问题

1、简介

比如用户在访问慕课网时,可能会发起一些向其他网站的请求,属于跨域,正常是无法访问的.

可以通过CORS跨域资源共享(Cross-Origin Resource Sharing)解决这个问题.
它是运行浏览器向跨Origin的服务器发起js请求获取响应.

实现跨域有常用的几种方法: Jsonp、SpringBoot Cors、Nginx

2、问题复现

首先来复现出现跨域问题的场景
1、修改ngin.conf

server {
       listen       89;
       server_name  localhost;

       location = /imooc/img/face1.png  {
            root   /home;
       }
   }
   
2、测试在浏览器可以正常访问,http://129.211.80.178:89/imooc/img/face1.png
   通过域名也可以正常访问,http://lwh.nginx.com:89/imooc/img/face1.png
   (在本地修改了host文件,配置lwh.nginx.com指向129.211.80.178)
   
3、测试在js代码中跨域能否正常访问,如下图,它是放在html中并部署到tomcat中,之后在浏览器通过tomcat访问该html进行访问,
   打开控制台发现报错

3、解决方法

3.1、SpringBoot中配置支持跨域

@Configuration
public class CorsConfig {

    public CorsConfig() {
    }

    @Bean
    public CorsFilter corsFilter() {
        // 1. 添加cors配置信息
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("http://localhost:8080");
        config.addAllowedOrigin("http://shop.z.mukewang.com:8080");
        config.addAllowedOrigin("http://center.z.mukewang.com:8080");
        config.addAllowedOrigin("http://shop.z.mukewang.com");
        config.addAllowedOrigin("http://center.z.mukewang.com");
        config.addAllowedOrigin("*");

        // 设置是否发送cookie信息
        config.setAllowCredentials(true);

        // 设置允许请求的方式
        config.addAllowedMethod("*");

        // 设置允许的header
        config.addAllowedHeader("*");

        // 2. 为url添加映射路径
        UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
        corsSource.registerCorsConfiguration("/**", config);

        // 3. 返回重新定义好的corsSource
        return new CorsFilter(corsSource);
    }

}

3.2、Nginx中配置

// 修改之后就可以正常访问了
server {
       listen       89;
       server_name  localhost;

       #允许跨域请求的域，*代表所有
       add_header 'Access-Control-Allow-Origin' *;
       
       #允许带上cookie请求
       add_header 'Access-Control-Allow-Credentials' 'true';

       #允许请求的方法，比如 GET/POST/PUT/DELETE
       add_header 'Access-Control-Allow-Methods' *;

       #允许请求的header
       add_header 'Access-Control-Allow-Headers' *;

       location = /imooc/img/face1.png  {
            root   /home;
       }
   }

在浏览器控制台可以看该图片对应的响应头

来源：oschina

链接：https://my.oschina.net/liwanghong/blog/4267322