Spring Boot 2.x（九）：遇到跨域再也不慌

什麼是跨域

首先，咱們須要瞭解一下一個URL是怎麼組成的：

// 協議 + 域名（子域名 + 主域名） + 端口號 + 資源地址 http: + // + www.baidu.com + :8080/

只要協議，子域名，主域名，端口號這四項組成部分中有一項不一樣，就能夠認爲是不一樣的域，不一樣的域之間互相訪問資源，就被稱之爲跨域。

隨着先後端分離開發的愈來愈普及，會常常遇到跨域的問題，當咱們在瀏覽器中看到這樣的錯誤時，就須要意識到遇到了跨域：

解決跨域的幾種方案

首先，咱們使用vue-cli來快速構建一個前端項目，而後使用axios來向後臺發送ajax請求。而後在控制檯中打印出返回信息。這裏就再也不多作贅述，後面我會單獨寫一篇文章來說一下如何使用vue-cli快速建立一個vue項目。

這裏再也不講解使用jsonp的方式來解決跨域，由於jsonp方式只能經過get請求方式來傳遞參數，並且有一些不便之處。

下面的幾種方式都是經過**跨域訪問技術CORS(Cross-Origin Resource Sharing）**來解決的。具體的實現原理咱們不作深刻的探究，這節課的目的是解決跨域問題~

方法一：註解

在Spring Boot 中給咱們提供了一個註解@CrossOrigin來實現跨域，這個註解能夠實現方法級別的細粒度的跨域控制。咱們能夠在類或者方添加該註解，若是在類上添加該註解，該類下的全部接口均可以經過跨域訪問，若是在方法上添加註解，那麼僅僅只限於加註解的方法能夠訪問。

@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
   @Autowired
    private UserService userService;

   @RequestMapping("/findAll")
    public Object findAll(){
        return userService.list();
    }
}
複製代碼

如今再去測試一下：

Bingo，成功！

方法二：實現WebMvcConfigurer

這裏能夠經過實現WebMvcConfigurer接口中的addCorsMappings()方法來實現跨域。

@Configuration
class CORSConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}
複製代碼

下面咱們將剛剛加上的註解給註釋掉，看看能不能訪問到這個接口：

不出咱們所料，果真仍是能夠的~

方法三：Filter

咱們能夠經過實現Fiter接口在請求中添加一些Header來解決跨域的問題：

@Component
public class CORSFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
        if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
            response.getWriter().println("ok");
            return;
        }
        chain.doFilter(request, response);
    }
    @Override
    public void destroy() {
    }
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
}
複製代碼

不出意外的話，應該也能夠在控制檯獲取到返回信息。

Nginx配置解決跨域問題

若是咱們在項目中使用了Nginx，能夠在Nginx中添加如下的配置來解決跨域（原理其實和Filter相似，只不過把活兒丟給了運維🤔）

location / {
   add_header Access-Control-Allow-Origin *;
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;

   if ($request_method = 'OPTIONS') {
     return 204;
   }
}
複製代碼

原創文章，才疏學淺，若有不對之處，萬望告知！

---

公衆號

您的推薦就是對我最大的支持！