Spring Boot Web应用开发 CORS 跨域请求设置 Invalid CORS request

使用SpringBoot Web开发程序时，前后端分离时，经常遇到跨域问题，特别是很多情况下Firefox浏览器没有问题，而chrome浏览器有问题，仅仅从浏览器的web控制台很难发现有效的错误或者告警信息，因此在开发程序很有必要在开发阶段就考虑到并配置好跨域。

SpringBoot提供的跨域配置有两种，一种是全局的，一种是具体到方法的。如果同时配置了那么具体方法的优先。
具体代码在这里欢迎fork，加星。

全局跨域配置
直接上代码，也就提供一个自定义的WebMvcConfigurer bean，该bean的addCorsMappings方法中定义自己的跨域配置。
可以看到我的跨域配置是允许来自http://localhost:6677访问/user/users/*的方法。等程序运行后我们可以发现如果我们的前端使用http://127.0.0.1:6677 或者我们的前端运行在http://localhost:8080都无法通过rest访问对应的API（备注，示例程序提供了/user/users和/user/users/{userId}方法）

package com.yq;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;@SpringBootApplication
public class CorsDemoApplication {public static void main(String[] args) {SpringApplication.run(CorsDemoApplication.class, args);}@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurerAdapter() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/user/users/*").allowedOrigins("http://localhost:6677");}};}
}

具体方法的跨域配置@CrossOrigin
我们可以使用@CrossOrigin在具体的API上配置跨域设置。@CrossOrigin(origins = “http://localhost:9000”)表明该方法允许来自http://localhost:9000访问，也就是前端可以是localhost:9000。

    @ApiOperation(value = "查询所有用户")@CrossOrigin(origins = "http://localhost:9000")@GetMapping(value = "/users", produces = "application/json;charset=UTF-8")public Iterable<User> findAllUsers() {Collection<User> users = userMap.values();return users;}

前端代码
前端一个简单的js和html，详细内容看代码。

$(document).ready(function() {$.ajax({url: "http://localhost:6606/user/users/2"}).then(function(data, status, jqxhr) {console.log(data);$('.user-id').append(data.id);$('.user-name').append(data.name);console.log(jqxhr);});
});

效果截图。
示例程序前后端在一起。都运行本机的6606端口上，当你使用http://127.0.0.1:6606/时，因为跨域设置不对，前端无法访问http://localhost:6606/user/users/2。当前段运行在http://localhost:6677/时，前端可以正常访问http://localhost:6606/user/users/2

springboot简单解决跨域相关推荐

springboot项目解决跨域的几种方式
跨域资源共享(CORS):通过修改Http协议header的方式,实现跨域.说的简单点就是,通过设置HTTP的响应头信息,告知浏览器哪些情况在不符合同源策略的条件下也可以跨域访问,浏览器通过解析Htt ...
Springboot 利用CORS 解决跨域问题
什么是跨域首先我们先用springboot 建立1个简单的API, 它返回1个json package com.example.demo_api_cors.controller;import com ...
Springboot解决跨域问题
说明什么是跨域?由于浏览器的安全性限制,不允许前端页面访问协议不同.域名不同.端口号不同的http接口,例如我本地创建一个html,里面写一个ajax请求访问我服务器springboot应用提供的接 ...
SpringBoot解决跨域问题的六种方式
一.同源策略同源,就是咱们域名.端口号.ip.采用的协议都相同,那么我们就是同源的反之就是不同源的!!! 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览 ...
继承WebMvcConfigurer 和 WebMvcConfigurerAdapter类依然CORS报错? springboot 两种方式稳定解决跨域问题
继承WebMvcConfigurer 和 WebMvcConfigurerAdapter类依然CORS报错???springboot 两种方式稳定解决跨域问题! 之前我写了一篇文章,来解决CORS报错 ...
Springboot 解决跨域的四种姿势
Springboot 解决跨域的四种姿势姿势一实现WebMvcConfigurer#addCorsMappings的方法 import org.springframework.context.an ...
SpringBoot解决跨域的5种方式
本文来说下SpringBoot中实现跨域的5种方式. 文章目录什么是跨域 java解决CORS跨域请求的方式返回新的CorsFilter(全局跨域) 重写WebMvcConfigurer(全局跨域 ...
springboot解决跨域问题(Cors)
springboot解决跨域问题(Cors) 参考文章: (1)springboot解决跨域问题(Cors) (2)https://www.cnblogs.com/owenma/p/8466856.h ...
Springboot中关于跨域问题的一种解决方法
Springboot中关于跨域问题的一种解决方法参考文章: (1)Springboot中关于跨域问题的一种解决方法 (2)https://www.cnblogs.com/zishu/p/107272 ...

springboot简单解决跨域

Spring Boot Web应用开发 CORS 跨域请求设置 Invalid CORS request

springboot简单解决跨域相关推荐

最新文章

热门文章