自定义的api、按照官方的配置跨域
一、三种方式配置跨域-官方代码
1、单个控制器方法CORS注解
@RestController
@RequestMapping("/system/test")
public class TestController {
@CrossOrigin
@GetMapping("/{id}")
public AjaxResult getUser(@PathVariable Integer userId) {
// ...
}
@DeleteMapping("/{userId}")
public AjaxResult delete(@PathVariable Integer userId) {
// ...
}
}
2、整个控制器启用CORS注解
@CrossOrigin(origins = "http://ruoyi.vip", maxAge = 3600)
@RestController
@RequestMapping("/system/test")
public class TestController {
@GetMapping("/{id}")
public AjaxResult getUser(@PathVariable Integer userId) {
// ...
}
@DeleteMapping("/{userId}")
public AjaxResult delete(@PathVariable Integer userId) {
// ...
}
}
3、全局CORS配置(在ResourcesConfig重写addCorsMappings方法)
/**
* web跨域访问配置
*/
@Override
public void addCorsMappings(CorsRegistry registry)
{
// 设置允许跨域的路径
registry.addMapping("/**")
// 设置允许跨域请求的域名
.allowedOrigins("*")
// 是否允许证书
.allowCredentials(true)
// 设置允许的方法
.allowedMethods("GET", "POST", "DELETE", "PUT")
// 设置允许的header属性
.allowedHeaders("*")
// 跨域允许时间
.maxAge(3600);
}
二、按照上面进行配置了还是不行,最后发现 application.yml 文件配置token的header 字段是 Authorization,而我的请求接口正好用了这个字段,所以系统就强制按照token 进行解析,最后就报错了
解决办法:
去掉前端请求头中携带的header 字段Authorization,改成别的字段即可 如:access-Token,这样自定义进行验证即可
三、补充一下nginx 的配置
#nginx 配置跨域处理
location /api/{
add_header 'Access-Control-Allow-Origin' '*';
proxy_pass http://p1xj1.12natapp1.cc/api/;
}
#刷新vue 404的解决办法
location /{
index index.html index.htm;
try_files $uri $uri/ /index.html;
}