成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue2.0 proxyTable配置，解決跨域

WilsonLiu95 / 2468人閱讀

摘要：什么是同源策略同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會(huì)受到影響?？梢哉f(shuō)是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)。

vue瀏覽器跨域問(wèn)題及解決辦法 一、 問(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ì)受到影響?？梢哉f(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解決跨域。

這里我請(qǐng)求的地址是 http://www.thenewstep.cn/test/testToken.php

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

proxyTable: {
      "/apis": {
        // 測(cè)試環(huán)境
        target: "http://www.thenewstep.cn/",  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            "^/apis": ""   //需要rewrite重寫的,
        }              
      }

target：就是需要請(qǐng)求地址的接口域名

這里列舉了2種數(shù)據(jù)請(qǐng)求方式： fecth和axios 1、 fetch方式:

在需要請(qǐng)求的頁(yè)面，只需要這樣寫(/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)
})

源碼地址: 從這里飛過(guò)去

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94249.html

相關(guān)文章

  • 解決vue-axios和vue-resource跨域問(wèn)題

    摘要：個(gè)人博客同步文章最近在學(xué)習(xí)，在中沒(méi)有，而是利用和進(jìn)行數(shù)據(jù)通信。問(wèn)題在使用的請(qǐng)求時(shí)出現(xiàn)跨域問(wèn)題。這個(gè)非常重要，困惑了自己好久設(shè)置代理解決跨域問(wèn)題后注釋掉解決跨域問(wèn)題同一樣設(shè)置代理方法，不過(guò)不需要特別聲明中的內(nèi)容了。 個(gè)人博客同步文章 https://mr-houzi.com/2018/02/... 最近在學(xué)習(xí)vue，在vue中沒(méi)有ajax，而是利用vue-resource和vue-ax...

    nanfeiyan 評(píng)論0 收藏0

  • 使用 vue2.0 開(kāi)發(fā)微信公眾號(hào)下前后端分離的SPA站點(diǎn)的填坑之旅

    摘要：目前正在寫一個(gè)微信公眾號(hào)的小項(xiàng)目，記錄一下遇到的問(wèn)題和解決方法主要是前端。前端提交時(shí)使用，在后端再取出對(duì)應(yīng)的微信支付看了下文檔，以前是需要用喚起支付，而現(xiàn)在則是把微信內(nèi)置到了微信的瀏覽器中。 目前正在寫一個(gè)微信公眾號(hào)的小項(xiàng)目，記錄一下遇到的問(wèn)題和解決方法（主要是前端）。內(nèi)容持續(xù)更新中~ 主要實(shí)現(xiàn) 前后端分離前端為 SPA 單頁(yè)面使用微信的JSSDK微信支付 技術(shù)方案 后端使用 php ...

    afishhhhh 評(píng)論0 收藏0

  • 使用 vue2.0 開(kāi)發(fā)微信公眾號(hào)下前后端分離的SPA站點(diǎn)的填坑之旅

    摘要：目前正在寫一個(gè)微信公眾號(hào)的小項(xiàng)目，記錄一下遇到的問(wèn)題和解決方法主要是前端。前端提交時(shí)使用，在后端再取出對(duì)應(yīng)的微信支付看了下文檔，以前是需要用喚起支付，而現(xiàn)在則是把微信內(nèi)置到了微信的瀏覽器中。 目前正在寫一個(gè)微信公眾號(hào)的小項(xiàng)目，記錄一下遇到的問(wèn)題和解決方法（主要是前端）。內(nèi)容持續(xù)更新中~ 主要實(shí)現(xiàn) 前后端分離前端為 SPA 單頁(yè)面使用微信的JSSDK微信支付 技術(shù)方案 后端使用 php ...

    Taonce 評(píng)論0 收藏0

  • vue2.0寫的V2EX社區(qū)

    摘要：按照如下配置可通過(guò)解決跨域問(wèn)題。但是這個(gè)不行，已親測(cè)豆瓣可以實(shí)現(xiàn)跨域，不知道是不是提供的是情況。本地開(kāi)發(fā)解決跨域終極方法僅僅適用于開(kāi)發(fā)環(huán)境安裝谷歌插件即可地址 v2ex A vue.js project for V2EX 預(yù)覽圖 首頁(yè) showImg(https://segmentfault.com/img/remote/1460000008631284); 主題 showImg(ht...

    tinyq 評(píng)論0 收藏0

  • axios異步請(qǐng)求數(shù)據(jù)的簡(jiǎn)單使用

    摘要：使用模擬好后端數(shù)據(jù)之后模擬數(shù)據(jù)的使用參考，就需要嘗試請(qǐng)求加載數(shù)據(jù)了。數(shù)據(jù)請(qǐng)求選擇了，現(xiàn)在都推薦使用。規(guī)定要發(fā)送到服務(wù)器的數(shù)據(jù)。布爾值，表示請(qǐng)求是否異步處理。要求為類型的參數(shù)，請(qǐng)求成功后調(diào)用的回調(diào)函數(shù)。在一個(gè)中重寫回調(diào)函數(shù)的字符串。 使用Mock模擬好后端數(shù)據(jù)之后（Mock模擬數(shù)據(jù)的使用參考：https://segmentfault.com/a/11...），就需要嘗試請(qǐng)求加載數(shù)據(jù)了。數(shù)...

    forsigner 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<