vue中使用代理解決前端跨域

如何用代理解決前端跨域

我們知道同源策略只是在瀏覽器中存在，不存在於服務器中。因此我們可以將需要跨域請求的地址轉發給我們自己的服務器然后委托服務器去請求信息。（常見的有nginx轉發、node代理。）

在vue項目中常用的是proxyTable，這個用起來很方便。

打開config下面的index.js，找到proxyTable，添加以下代碼即可：

'/api': { //替換代理地址名稱
      target: 'http://api.douban.com/', //代理地址
     changeOrigin: true, //可否跨域
     pathRewrite: {
     '^/api': '' //重寫接口，去掉/api
    }
}

（也就是將/api替換成http://api.douban.com/）
proxyTable的位置如下：

配置完之后需要重啟下項目 npm run dev

重啟之后，就可以調用，實現跨域了

具體使用：

在需要調用的接口前加上“/api”即可