關於vue-cli3中配置請求跨域的問題

關於vue-cli3中配置請求跨域的問題

根據Vue CLI3官方文檔，

需要在vue.config.js文件中配置devServer.proxy選項來解決跨域問題。

1. 關於vue.config.js文件

   此文件在vue-cli3中不會自動生成，需要手動在項目根目錄下創建。

2. 配置devServer.proxy選項

   以豆瓣的電影接口爲例，進行如下配置。

   • proxy中的/j/search_subjects代表匹配api的路徑，當命中請求中的url時進入這個代理，進行跨域請求；
   • target代表想要跨域的目標url；
   • changeOrigin：true代表允許跨域；
   • pathRewrite：代表當匹配到上面的路徑/j/search_subjects時需要在target後面拼接什麼路徑;

module.exports = {
    devServer: {
        proxy: {
            '/j/search_subjects': {
                target: 'https://movie.douban.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/j/search_subjects': '/j/search_subjects'
                }
            }
        }
    }
}

3. 在發起請求時：

this.axios.get("/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=5&page_start=0")
      .then(response => {
        console.log(responses);
      })

可以看到，當在此發起get請求時，在上面的配置文件中匹配到了請求url中的“/j/search_subjects”，此時配置就會生效，把這個請求拼接到上面的target後面，請求不同域中遠端的資源。

而此時打開瀏覽器開發者模式，通過network可以看到，

這個請求的路徑顯示爲：http://localhost:8080/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=5&page_start=0,

而實際請求的地址卻是：https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=5&page_start=0

這就是實際解決跨域的方式，通過把域名修改來達到跨域的目的，而實際訪問的路徑卻是另一個域名的資源，這就是通過proxy來實現跨域的方法。