国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue2.0 proxyTable配置，解決跨域

WilsonLiu95 / 2457人閱讀

摘要：什么是同源策略同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。

vue瀏覽器跨域問題及解決辦法 一、 問題

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

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.



為什么會跨域:
因為瀏覽器同源策略的限制，不是同源的腳本不能操作其他源下面的對象。

什么是同源策略:
同源策略（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：就是需要請求地址的接口域名

這里列舉了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)
})

源碼地址: 從這里飛過去

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94249.html

相關文章

  • 解決vue-axios和vue-resource跨域問題

    摘要：個人博客同步文章最近在學習，在中沒有，而是利用和進行數據通信。問題在使用的請求時出現跨域問題。這個非常重要，困惑了自己好久設置代理解決跨域問題后注釋掉解決跨域問題同一樣設置代理方法，不過不需要特別聲明中的內容了。 個人博客同步文章 https://mr-houzi.com/2018/02/... 最近在學習vue，在vue中沒有ajax，而是利用vue-resource和vue-ax...

    nanfeiyan 評論0 收藏0

  • 使用 vue2.0 開發微信公眾號下前后端分離的SPA站點的填坑之旅

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

    afishhhhh 評論0 收藏0

  • 使用 vue2.0 開發微信公眾號下前后端分離的SPA站點的填坑之旅

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

    Taonce 評論0 收藏0

  • vue2.0寫的V2EX社區

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

    tinyq 評論0 收藏0

  • axios異步請求數據的簡單使用

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

    forsigner 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<