Springboot 利用CORS 解决跨域问题

什么是跨域

首先我们先用springboot 建立1个简单的API，它返回1个json

package com.example.demo_api_cors.controller;

import com.example.demo_api_cors.dto.ValueDto;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class demoController {

    @RequestMapping("/getValue")
    @ResponseBody
    public ValueDto cors1(){
        return new ValueDto(0, "new Value");
    }
}

然后启动这个springboot，端口是8081

可以看到，我们可以在浏览器地址栏输入 url http://localhost:8081/getValue
来访问这个api，其中localhost 就是域名， 8081就是端口

打开debug mode，可以见到Response Header的信息，如上图篮圈中。

然后我们在建立1个springboot 项目，使用8082 这个端口，尝试在项目中的某个html文件调用上面这个api




    

    
    
        
            value is {{value}}

执行时，浏览器会显示下面的错误
Access to XMLHttpRequest at ‘http://localhost:8081/getValue’ from origin ‘http://localhost:8082’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

其实错误信息写得很清楚，
就是告诉你发生了跨域行为，从origin http://localhost:8082 访问另1个域的接口 http://localhost:8081/getValue，这个行为被CORS policy禁止了，因为respone header 没有 ‘Access-Control-Allow-Origin’ 这个item。

其实两个service 的域名都是localhost, 但是他们端口不一样，浏览器还是认为跨域了。

跨域的定义

其实，对于http://localhost:8081/getValue 这个api，直接在浏览器地址栏输入访问是没有问题的，没有跨域。
用命令行curl 去访问，也没有问题，没有跨域。

用postman 访问，也不会跨域。
在java/python的后台访问，也不会跨域。

跨域是浏览器的行为，因为浏览器做了限制，如果你能修改浏览器的代码，也可以取消跨域限制。

只有在浏览器的访问的html页面中，调用另1个域名或另个端口api，就会产生跨域问题。
也就是如果在同1个springboot中html调用后台的接口是没有跨域的，前后端分离就很可能会跨域。

在html中引用静态资源(js, css, img)也不会产生跨域。
只有在ajax调用api才会有跨域问题。

解决方法一， jsonp

因为静态资源不会产生跨域，那么在后台中返回一段js脚本，然后在html中静态引入，返回时再调用js里的callback函数，来欺骗浏览器。这种技术就是jsonp。 jsonp只支持get接口的跨域。

spring 在5.1中抛弃了jsonp这个古老的解决跨域方法。这里不讨论了。

解决方法二， CORS 解决跨域

这个方法是目前正统的方法，原理也很简单，上面错误信息也作了提示，只要在reponse 中加入1个header item ‘Access-Control-Allow-Origin’ ，告诉浏览器这个接口支持跨域访问，问题解决。

所以必须在api的项目修改接口。
在Controller中加入CrossOrigin(origins="*") 这个直接。

就是代表允许所有源主机跨域访问，也可以增加参数指定 get 还是 post，不写就默认全部

重新启动api项目，问题解决。
检查 Response Headers, 果然多了Access-Control-Allow-Origin 这个header

Springboot 利用CORS 解决跨域问题

value is {{value}}

Java相关栏目本月热门文章