vue瀏覽器跨域問(wèn)題和vue proxyTable跨域中pathRewrite配置

vue瀏覽器跨域問(wèn)題

當(dāng)瀏覽器報(bào)如下錯(cuò)誤時(shí)，則說(shuō)明請(qǐng)求跨域了。

localhost/:1 Failed to load http://www.thenewstep.cn/test/testToken.php: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

為什么會(huì)跨域

因?yàn)闉g覽器同源策略的限制，不是同源的腳本不能操作其他源下面的對(duì)象。

什么是同源策略

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會(huì)受到影響。

可以說(shuō)Web是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)。

簡(jiǎn)單的來(lái)說(shuō):協(xié)議、IP、端口三者都相同，則為同源

解決辦法

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

pathRewrite

簡(jiǎn)單來(lái)說(shuō)，pathRewrite是使用proxy進(jìn)行代理時(shí)，對(duì)請(qǐng)求路徑進(jìn)行重定向以匹配到正確的請(qǐng)求地址，

dev: {
? ? // Paths
? ? assetsSubDirectory: 'static',
? ? assetsPublicPath: '/',
? ? proxyTable: {
? ? ? '/api': {
? ? ? ? target: 'http://XX.XX.XX.XX:8083',
? ? ? ? changeOrigin: true,
? ? ? ? pathRewrite: {
? ? ? ? ? '^/api': '/api' ? // 這種接口配置出來(lái) ? ? http://XX.XX.XX.XX:8083/api/login
? ? ? ? ? //'^/api': '/' 這種接口配置出來(lái) ? ? http://XX.XX.XX.XX:8083/login
? ? ? ? }
? ? ? }
? ? }
? },

如何不配置pathRewrite 請(qǐng)求就被轉(zhuǎn)發(fā)到 http://XX.XX.XX.XX:8083 并把相應(yīng)uri帶上。

比如：localhost:8080/api/xxx 會(huì)被轉(zhuǎn)發(fā)到http://XX.XX.XX.XX:8083/api/xxx

配置完成后需要重新編譯一遍 , 調(diào)用接口的時(shí)候

? ? ? ? // 獲取菜單權(quán)限
? ? ? getPermission(){
? ? ? ? this.$ajaxget({
? ? ? ? ? url: '/api/getPermission',
? ? ? ? ? data: {},
? ? ? ? ? isLayer: true,
? ? ? ? ? successFc: data => {
? ? ? ? ? ? console.log(data.data)
? ? ? ? ? }
? ? ? ? })

2種數(shù)據(jù)請(qǐng)求方式： fecth和axios

1、fetch方式

在需要請(qǐng)求的頁(yè)面，只需要這樣寫(xiě)(/apis+具體請(qǐng)求參數(shù))，如下：

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實(shí)例原型上
// 設(shè)置axios請(qǐng)求的token
axios.defaults.headers.common['token'] = 'f4c902c9ae5a2a9d8f84868ad064e706'
//設(shè)置請(qǐng)求頭
axios.defaults.headers.post["Content-type"] = "application/json"

axios請(qǐng)求頁(yè)面代碼

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

代理配置proxy下pathrewrite失效踩坑

從網(wǎng)上直接找到的代碼復(fù)制過(guò)來(lái)報(bào)錯(cuò)，最后找了一下午為什么失效，最后發(fā)現(xiàn)問(wèn)題直接破防了

錯(cuò)誤：

pathRewrite: {?
? " ?^/api ?" ?: "" //若請(qǐng)求的路徑在目標(biāo)url下但不在/api 下，則將其轉(zhuǎn)換成空
? },

正確：

pathRewrite: {?
? "^/api": "" //若請(qǐng)求的路徑在目標(biāo)url下但不在/api 下，則將其轉(zhuǎn)換成空
? ?},

原因：

直接復(fù)制過(guò)來(lái)的 "  ^/api  "  : ""里面多了兩個(gè)空格，判斷url的時(shí)候就獲取不到/api，刪除空格就解決問(wèn)題了

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論