在vue-cli專案中proxyTable跨域問題-js教程-PHP中文網

這篇文章主要介紹了詳解vue-cli專案中的proxyTable跨域問題小結，現在分享給大家，也給大家做個參考。

什麼是跨域？

同源策略規定瞭如果兩個 url 的協定、網域、連接埠中有任何一個不等，就認定它們跨源了。

跨域的解有哪幾種？

1.JSONP 是 JSON with padding（填充式 JSON 或參數式 JSON）的簡寫。

JSONP實作跨域請求的原理簡單的說，就是動態創建 標籤，然後利用 的src 不受同源策略約束來跨域獲取資料。

JSONP 由兩部分組成： 回呼函數和資料 。回調函數是當回應到來時應該在頁面中呼叫的函數。回呼函數的名字一般是在請求中指定的。而資料就是傳入回呼函數中的 JSON 資料。 動態建立 標籤，設定其src，回呼函數在src中設定：

var script = document.createElement("script"); script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; document.body.insertBefore(script, document.body.firstChild); 登入後複製 在頁面中，傳回的JSON作為參數傳入回呼函數中，我們透過回呼函數來操作數據。

function handleResponse(response){ // 对response数据进行操作代码 console.log(response) } 登入後複製 JSONP目前還是比較流行的跨域方式，雖然JSONP使用起來方便，但是也存在一些問題：

#首先， JSONP 是從其他域中載入程式碼執行。如果其他網域不安全，很可能會在回應中夾帶一些惡意程式碼，而此時除了完全放棄 JSONP 呼叫之外，沒有辦法追究。因此在使用不是你自己維運的 Web 服務時，一定要確保它安全可靠。

JSONP 具有直接存取回應文字的優點，但是要想確認JSONP 是否請求失敗並不容易，因為script 標籤的onerror 事件還未得到瀏覽器廣泛的支持，此外它僅能支援GET 方式調用。

2.cros跨域

整個CORS通訊過程，都是瀏覽器自動完成，不需要使用者參與。對開發者來說，CORS通訊與同源的AJAX通訊沒有差別，程式碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。

因此，實現CORS通訊的關鍵是伺服器。只要伺服器實作了CORS接口，就可以跨源通訊。

一個常用的完整的跨域頭：

let express=require("express"); let app=express(); app.use(function(req,res,next){ //如果在webpack里配置了代理，那么这些响应头都不要了 //只允许8080访问 res.header('Access-Control-Allow-Origin','http://localhost:8080');

//服务允许客户端发的方法 res.header('Access-Control-Allow-Methods','GET,POST,DELETE,PUT'); //服务器允许的请求头 res.header('Access-Control-Allow-Headers','Content-Type,Accept'); //跨域携带cookie 允许客户端把cookie发过来 res.header('Access-Control-Allow-Credentials','true'); //如果请求的方法是OPTIONS,那么意味着客户端只要响应头，直接结束响应即可 if(req.method == 'OPTIONS'){ res.end(); }else{ next(); } }); app.listen(3000); 登入後複製 3.hash iframe

4.postMessage

#5.WebSockets

後台只給我接口，不能修改後台，怎麼跨域？

在實際工作中，前後端配合並不是那麼默契，如果後台只給我接口，不能修改後台，怎麼跨域？ 在vue專案和react專案中的config檔中，都有一個proxy代理設置，這個就是用來在開發環境下進行跨域的。對其進行設定就能實現跨域。

透過vue-cli腳手架搭建出來的專案,修改config資料夾下的index.js中的proxyTable就能實現：

module.exports = { dev: { env: { NODE_ENV: '"development"' }, //proxy

// 只能在开发环境中进行跨域，上线了要进行反向代理nginx设置 proxyTable: { //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add'即可 '/api': { target: 'http://news.baidu.com',//你要跨域的网址 比如 'http://news.baidu.com', secure: true, // 如果是https接口，需要配置这个参数 changeOrigin: true,//这个参数是用来回避跨站问题的，配置完之后发请求时会自动修改http header里面的host，但是不会修改别的 pathRewrite: { '^/api': '/api'//路径的替换规则 //这里的配置是正则表达式，以/api开头的将会被用用‘/api'替换掉，假如后台文档的接口是 /api/list/xxx //前端api接口写：axios.get('/api/list/xxx') ， 被处理之后实际访问的是：http://news.baidu.com/api/list/xxx } } }, 登入後複製 讓我們用本地起的服務來測試如何跨域demo

0.用vue-cli搭建的腳手架， npm run dev 前端連接埠號碼一般是： http:// localhost:8080

1.修改config檔中的index.js proxyTable:{} 這段程式碼，替換掉即可：

module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:8000', secure: true, changeOrigin: true, pathRewrite: { '^/api': '/api' } } }, 登入後複製 2.自己寫一個後台，使用express node.js ，不設定任何跨域頭，程式碼如下：

注意自己需要在目前資料夾下提前準備一個list.json的文件，用來讀取數據，返回數據。 fs.readFile('./list.json','utf8',cb)

let express = require('express'); let app = express(); let fs = require('fs'); let list = require('./list'); let bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(express.static(__dirname));

//read function read(cb) { //用来读取数据的，注意自己在mock文件夹下准备一些数据 fs.readFile('./list.json','utf8',function (err,data) { if(err || data.length === 0){ cb([]); // 如果有错误 或者文件没长度 就是空数组 }else{ cb(JSON.parse(data)); // 将读出来的内容转化成对象 } }) } //write function write(data,cb) { // 写入内容 fs.writeFile('./list.json',JSON.stringify(data),cb) } // 注意 没有设置跨域头 app.get('/api/list',function (req,res) { res.json(list); }); app.listen(8000,()=>{ console.log('8000 is ok'); }); 登入後複製 3.前端調取的api程式碼：

import axios from 'axios'; axios.interceptors.response.use((res)=>{ return res.data; // 在这里统一拦截结果 把结果处理成res.data }); export function getLists() { return axios.get('/api/list'); } 登入後複製 4.在組件中進行跨域調取接口，打印數據

隨便在一個文件中引入api測試一下打印出來接口返回的數據

import {getLists} from '../../api/index' export default { async created(){ let dataList=await getLists(); console.log(dataList,"我请求的数据"); }, 登入後複製 5.查看控制台，列印出數據，沒有保錯，代表跨域成功，代理服務成功

開發環境成功跨域了，上線怎麼辦？

上線要進行nginx反向代理設置，同時應區分環境變量，具體設定請看圖片：

#

上面是我整理給大家的，希望今後會對大家有幫助。

在Immutable.js中如何實現撤銷重做功能（詳細教學）

在vue中有幾個綁定變數的值以及防止其改變的方法（詳細教學）

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

在vue-cli專案中proxyTable跨域問題