nginx解决跨域

nginx解决跨域

参考网址:

https://mp.weixin.qq.com/s/y3jecdz1RE7WoqXiB-OGvQ

前提总结

之前结合工作和实践，掌握了springboot解决跨域的问题

具体参考：

可以参考下面两篇自己总结的文章实现跨域

https://blog.csdn.net/shaoming314/article/details/113937467

https://blog.csdn.net/shaoming314/article/details/112003730

说明

之前也知道nginx可以解决跨域,但是没有具体设置过,这次借着工作中测试环境上线联调需要解决跨域问题

跨域定义和举例

跨域：由于浏览器的同源策略，即属于不同域的页面之间不能相互访问各自的页面内容 注：同源策略，单说来就是同协议，同域名，同端口

举例

URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名，不同端口 不允许 http://www.a.com/a.js https://www.a.com/b.js 同一域名，不同协议 不允许 http://www.a.com/a.js http://70.32.92.74/b.js 域名和域名对应ip 不允许 http://www.a.com/a.js http://script.a.com/b.js 主域相同，子域不同 不允许 http://www.a.com/a.js http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问） http://www.cnblogs.com/a.js http://www.a.com/b.js 不同域名 不允许

nginx处理跨域的过程

1.启动jar包

nohup java -jar expo-v0.1.0.jar --spring.profiles.active=shm --server.port=8081 > expo.log

说明:

该项目启动端口为8080

指定运行环境为shm,对应的就是springboot项目的aplication-shm.properties

指定日志输出文件为jar包同级目录的expo.log文件

2.注释后端跨域请求的代码

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {

    //跨域配置
//    private CorsConfiguration buildConfig() {
//        CorsConfiguration corsConfiguration = new CorsConfiguration();
//        corsConfiguration.addAllowedOrigin("http://chinaexpo365.com");
//        corsConfiguration.addAllowedOrigin("http://www.chinaexpo365.com");
//        corsConfiguration.addAllowedOrigin("https://www.chinaexpo365.com");
//        corsConfiguration.addAllowedHeader("*");
//        corsConfiguration.addAllowedMethod("*");
//        corsConfiguration.setAllowCredentials(true);
//        return corsConfiguration;
//    }
//
//    @Bean
//    public CorsFilter corsFilter() {
//        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
//        source.registerCorsConfiguration("/**", buildConfig());
//        return new CorsFilter(source);
//    }
}

重点说明:

如果使用nginx解决跨域,那么后端就不要设置跨域,否者会报错

3.设置nginx配置文件

主要修改的内容如下

 server {
        listen       8080;
        server_name  localhost;

        location / {
                     add_header Access-Control-Allow-Origin *;
                     add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
                     add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

                   if ($request_method = 'OPTIONS') {
                         return 204;
                       }          
                     proxy_pass http://localhost:8081;
           
        }

4.重新启动nginx

到此nginx配置跨域处理成功

5.跨域报错

一般出现以上类似错误证明是跨域问题

参数说明

Access-Control-Allow-Origin

服务器默认是不被允许跨域的。给Nginx服务器配置Access-Control-Allow-Origin *后，表示服务器可以接受所有的请求源（Origin）,即接受所有跨域的请求。

Access-Control-Allow-Headers

是为了防止出现以下错误：

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

这个错误表示当前请求Content-Type的值不被支持。其实是我们发起了"application/json"的类型请求导致的。这里涉及到一个概念：预检请求（preflight request）,请看下面"预检请求"的介绍。

Access-Control-Allow-Methods

是为了防止出现以下错误：

Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

给OPTIONS 添加 204的返回

是为了防止出现以下错误：

Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

给OPTIONS 添加 204的返回

是为了处理在发送POST请求时Nginx依然拒绝访问的错误,发送"预检请求"时，需要用到方法 OPTIONS ,所以服务器需要允许该方法。