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 ,所以服务器需要允许该方法。