vue2.0 proxyTable配置，解決跨域

 

vue項目瀏覽器跨域問題及解決辦法

一、 問題

當瀏覽器報如下錯誤時，則說明請求跨域了。

• 為什么會跨域:
  因為瀏覽器同源策略的限制，不是同源的腳本不能操作其他源下面的對象。
• 什么是同源策略:
  同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。

  簡單的來說:協議、IP、端口三者都相同，則為同源

  

二、解決辦法

跨域的解決辦法有很多，比如script標簽 、jsonp、后端設置cros等等...,但是我這里講的是webpack配置vue 的 proxyTable解決跨域。

這里我請求的地址是 http://www.thenewstep.cn/test/testToken.php

那么在ProxyTable中具體配置如下:

proxyTable: { '/apis': { // 測試環境 target: 'http://www.thenewstep.cn/', // 接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/apis': '' //需要rewrite重寫的, } }

target：就是需要請求地址的接口域名

配置完必須要重啟node服務（重新npm run dev）才會生效！！！

這里列舉了2種數據請求方式： fecth和axios

1、 fetch方式:

在需要請求的頁面，只需要這樣寫(/apis+具體請求參數)，如下：

fetch("/apis/test/testToken.php", { method: "POST", headers: { "Content-type": "application/json", token: "f4c902c9ae5a2a9d8f84868ad064e706" }, body: JSON.stringify(data) }) .then(res => res.json()) .then(data => { console.log(data); });

2、axios方式:

main.js代碼

import Vue from 'vue' import App from './App' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$axios = axios //將axios掛載在Vue實例原型上 // 設置axios請求的token axios.defaults.headers.common['token'] = 'f4c902c9ae5a2a9d8f84868ad064e706' //設置請求頭 axios.defaults.headers.post["Content-type"] = "application/json"

axios請求頁面代碼

this.$axios.post('/apis/test/testToken.php',data).then(res=>{ console.log(res) })

參考來源：https://segmentfault.com/a/1190000014396546