瀏覽器的同源策略

跨域的根本原因就是因?yàn)闉g覽器的同源策略，這是瀏覽器出于安全性考慮做出的限制，所謂同源是指：域名、協(xié)議、端口相同。

比如在互聯(lián)網(wǎng)上有兩個(gè)資源（網(wǎng)頁或者請(qǐng)求等），如果A想要訪問B的資源，如果A、B并非同源，即域名、協(xié)議、端口有任意一個(gè)不相同，那么就會(huì)出現(xiàn)跨域問題。

跨域的表現(xiàn)即是在瀏覽器控制臺(tái)中報(bào)類似于下圖中的錯(cuò)誤。

No 'Access-Control-Allow-Origin' header is present on the requested resource.

下面是常見的幾種跨域的情況，除了前兩種都會(huì)出現(xiàn)跨域問題

跨域問題的解決

分享幾個(gè)比較常用的解決跨域的辦法

后端解決方案

對(duì)于JAVA后端來說，如果你使用的是SpringBoot來開發(fā)項(xiàng)目，那么解決跨域會(huì)非常的方便，只需要在需要開啟跨域支持的借口的控制層，就是是常說的Controller，添加類注解：@CrossOrigin，如下

@CrossOrigin
@RestController
public class HelloController {
    // ...具體請(qǐng)求
}

SpringBoot也可以編寫一個(gè)專門的配置類來解決跨域的問題，即CorsConfig，這樣做的好處就是不需要每一個(gè)Controller添加@CrossOrigin注解

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMAppings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowCredentials(true)
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .maxAge(3600);
    }
}

還有一種方法也可以解決跨域問題，就是利用過濾器來解決，代碼如下

@Component
public class CORSFilter implements Filter {


    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

以上三種方法都可以實(shí)現(xiàn)對(duì)跨域的支持，個(gè)人最推薦使用第一種注解的方式，簡單粗暴！

前端解決方案

在Vue的項(xiàng)目中可以使用配置代理的方式解決跨域問題，以Vue2.X版本為例

這里后端端口8888，暴露一個(gè)moti-memo/hello請(qǐng)求，前端端口為8080，通過上文可知，在前后端均不處理的情況下，端口不同肯定會(huì)發(fā)生跨域問題。

export default {
name: 'App',
created() {
this.$http.get("http://localhost:8888/moti-memo/hello").then(res => {
console.log(res.data);
})
}
}

前端配置代理的方式也很簡單，編輯config/index.js配置文件，在dev對(duì)象的proxyTable屬性配置代理信息，如下

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target:'http://127.0.0.1:8888',
        changeOrigin:true,
        pathRewrite:{
          '^/api': ''
        }
      }
    },

這里可以看到我們配置了/api前綴的代理，之后我們只需要在使用axIOS發(fā)送請(qǐng)求的時(shí)候把原來跨域的請(qǐng)求IP+端口替換成/api。

<script>
export default {
  name: 'App',
  created() {
    this.$http.get("/api/moti-memo/hello").then(res => {
      console.log(res.data);
    })
  }
}
</script>

在Vue-cli的3.X版本中，配置文件變?yōu)榱藇ue.config.js，我們需要編輯這個(gè)配置文件，在devServer對(duì)象的proxy屬性加入代理信息，參考如下

module.exports = {
  lintOnSave: false,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

Nginx解決方案

使用Nginx配置反向代理也是可以幫助我們解決跨域問題的，只需要修改nginx的配置文件，參考如下

server {
    listen 9000;
    server_name localhost;
    
    location /api/ {
        rewrite ^/api/(.*)$ /$1 break;   
        # 跨域服務(wù)的地址
        proxy_pass http://www.serverA.com;
    }
}

前端所有對(duì)跨域服務(wù)的請(qǐng)求都加一個(gè)/api前綴，Nginx做代理的時(shí)候會(huì)移除/api前綴。例如：請(qǐng)求路徑為/api/hello的請(qǐng)求將會(huì)訪問http://www.serverA.com/hello。