nginx版本是1.15.12配置跨域问题
server
{
listen 3002;
server_name localhost;
location /ok {
// 这行跟跨域无关
proxy_pass http://localhost:3000;
# 指定允许跨域的方法,*代表所有
add_header Access-Control-Allow-Methods *;
# 预检命令的缓存,如果不缓存每次会发送两次请求
add_header Access-Control-Max-Age 3600;
# 带cookie请求需要加上这个字段,并设置为true
add_header Access-Control-Allow-Credentials true;
# 表示允许这个域跨域调用(客户端发送请求的域名和端口)
# $http_origin动态获取请求客户端请求的域 不用*的原因是带cookie的请求不支持*号
add_header Access-Control-Allow-Origin $http_origin;
# 表示请求头的字段 动态获取
add_header Access-Control-Allow-Headers
$http_access_control_request_headers;
# OPTIONS预检命令,预检命令通过时才发送请求
# 检查请求的类型是不是预检命令
if ($request_method = OPTIONS){
return 200;
}
}
}
这样配置nginx匹配到ok路径url的就可以解决跨域问题了。也可以把跨域的参数配置到nginx的http模块里面针对nginx的所有请求或者配置到nginx的server模块里面针对某个项目下面。配置到哪个作用域看项目具体需求而定。
注意:有些人配置nginx的跨域问题会少配置以下代码的。如果缺少这两行代码将导致非简单请求无法解决跨域问题。而简单请求却可以解决跨域问题,这样容易造成跟前端扯皮,后端说配置了跨域问题,前端却说有跨域问题出现
if ($request_method = OPTIONS){
return 200;
}
浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
只要同时满足以下两大条件,就属于简单请求。
(1) 请求方法是以下三种方法之一:
HEAD
GET
POST
(2)HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同时满足上面两个条件,就属于非简单请求。浏览器对这两种请求的处理,是不一样的。 跨域的详情讲解请看这篇文章: http://www.ruanyifeng.com/blog/2016/04/cors.html
在项目中解决跨域问题建议在spring代码中解决比较好。在 nginx中配置跨域问题语义不清,迁移项目nginx的配置还得配置上。
springboot的2.1.8.RELEASE版本配置跨域方式
@Configuration
public class CorsConfig implements WebMvcConfigurer {
/**
* 配置跨域请求处理
* */
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.maxAge(3600);
}
}
通过spring配置跨域问题只需要简单的几行代码就可以解决了。这样配置简单请求和非简单请求可以适用