nginx解决跨域和spring解决跨域

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配置跨域问题只需要简单的几行代码就可以解决了。这样配置简单请求和非简单请求可以适用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值