前端跨域問題：Access-Control-Allow-Origin

1.背景

       最近在研究vue+springboot的前後端分離項目，遇到一個問題，從vue發送的請求後臺能接收到並且返回，但是返回的消息前端接收不到，打開控制檯看到報錯信息：“......has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is......”,網上一查牽扯到跨域問題（CORS），本篇彙總三種方法

2.原因

       我vue前端端口爲8080，springboot後臺端口爲8081，因此從8080端口與8081端口之間的請求屬於跨域，當然，這也只是跨域的一種表現。

3.如何解決

       知道了原因，那麼找到解決方法也就不難了，CORS官方面對這種情況也給出瞭解決方案，服務器可以通過HTTP 頭字段(Access-Control-Allow-Origin)聲明哪些源通過瀏覽器有權限訪問哪些資源。

4.解決方法

       下面給出了三種解決方案，但是本質都是一樣的，都是圍繞HTTP 頭字段(Access-Control-Allow-Origin)

     （1）代碼如下

package com.zy.demo.controller;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorseConfig {

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);

    }
}

     (2)添加過濾器，代碼如下

package com.zy.demo.controller;

import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebFilter(filterName = "CORSFilter", urlPatterns = {"/*"})
@Order(value = 1)
@Configuration
public class AccessControlAllowOriginFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(req, response);
    }

    public void init(FilterConfig filterConfig) {

    }

    public void destroy() {

    }

}

注意：此類上的三個註解不能丟，或者在web.xml中配置filter.

    (3) 採用註解

@CrossOrigin(origins = "*")

package com.zy.demo.controller;


import com.zy.demo.entity.custom.UserLoginParam;
import com.zy.demo.entity.table.TUser;
import com.zy.demo.service.TUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private TUserService tUserService;

    @CrossOrigin(origins = "*")
    @RequestMapping("/login")
    public Object loginUser(UserLoginParam cUser){
        Map<String, Object> result = new HashMap<String, Object>();
        System.out.println(cUser);
        if("admin".equals(cUser.getCUsername())&&"123456".equals(cUser.getCPwd())){
            result.put("code",200);
            result.put("msg","登錄成功");
            result.put("token","admin");
            return result;
        }

        result.put("code",500);
        result.put("msg","登錄失敗");
        return result;
    }

    @CrossOrigin(origins = "*")
    @RequestMapping("/userList")
    public List<TUser> userList(){
        return tUserService.userList();
    }
}

結語：三種方式介紹完畢，其實跨域問題值得探究的地方還有很多，大家下去可以自己研究一下。