您好,登錄后才能下訂單哦!
這篇“vue的跨域問題怎么解決”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“vue的跨域問題怎么解決”文章吧。
在vue中,跨域是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本;它是瀏覽器同源策略造成的,是瀏覽器對(duì)JS實(shí)施的安全限制。跨域本質(zhì)是瀏覽器基于同源策略的一種安全手段;而同源策略是一種約定,它是瀏覽器最核心也最基本的安全功能。vue跨域的解決方法:1、JSONP;2、CORS;3、Proxy。
跨域是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是瀏覽器同源策略造成的,是瀏覽器對(duì)JS實(shí)施的安全限制。
跨域本質(zhì)是瀏覽器基于同源策略的一種安全手段
同源策略(Sameoriginpolicy),是一種約定,它是瀏覽器最核心也最基本的安全功能
所謂同源(即指在同一個(gè)域)具有以下三個(gè)相同點(diǎn)
協(xié)議相同(protocol)
主機(jī)相同(host)
端口相同(port)
反之非同源請(qǐng)求,也就是協(xié)議、端口、主機(jī)其中一項(xiàng)不相同的時(shí)候,這時(shí)候就會(huì)產(chǎn)生跨域
一定要注意跨域是瀏覽器的限制,你用抓包工具抓取接口數(shù)據(jù),是可以看到接口已經(jīng)把數(shù)據(jù)返回回來了,只是瀏覽器的限制,你獲取不到數(shù)據(jù)。用postman請(qǐng)求接口能夠請(qǐng)求到數(shù)據(jù)。這些再次印證了跨域是瀏覽器的限制。
解決跨域的方法有很多,下面列舉了三種:
JSONP
CORS
Proxy
而在vue
項(xiàng)目中,我們主要針對(duì)CORS
或Proxy
這兩種方案進(jìn)行展開
CORS (Cross-Origin Resource Sharing,跨域資源共享)是一個(gè)系統(tǒng),它由一系列傳輸?shù)腍TTP頭組成,這些HTTP頭決定瀏覽器是否阻止前端 JavaScript 代碼獲取跨域請(qǐng)求的響應(yīng)
CORS
實(shí)現(xiàn)起來非常方便,只需要增加一些 HTTP
頭,讓服務(wù)器能聲明允許的訪問來源
只要后端實(shí)現(xiàn)了 CORS
,就實(shí)現(xiàn)了跨域
以koa
框架舉例
添加中間件,直接設(shè)置Access-Control-Allow-Origin
請(qǐng)求頭
app.use(async (ctx, next)=> {
ctx.set('Access-Control-Allow-Origin', '*');
ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (ctx.method == 'OPTIONS') {
ctx.body = 200;
} else {
await next();
}
})
ps: Access-Control-Allow-Origin
設(shè)置為*其實(shí)意義不大,可以說是形同虛設(shè),實(shí)際應(yīng)用中,上線前我們會(huì)將Access-Control-Allow-Origin
值設(shè)為我們目標(biāo)host
代理(Proxy)也稱網(wǎng)絡(luò)代理,是一種特殊的網(wǎng)絡(luò)服務(wù),允許一個(gè)(一般為客戶端)通過這個(gè)服務(wù)與另一個(gè)網(wǎng)絡(luò)終端(一般為服務(wù)器)進(jìn)行非直接的連接。一些網(wǎng)關(guān)、路由器等網(wǎng)絡(luò)設(shè)備具備網(wǎng)絡(luò)代理功能。一般認(rèn)為代理服務(wù)有利于保障網(wǎng)絡(luò)終端的隱私或安全,防止攻擊
方案一
如果是通過vue-cli
腳手架工具搭建項(xiàng)目,我們可以通過webpack
為我們起一個(gè)本地服務(wù)器作為請(qǐng)求的代理對(duì)象
通過該服務(wù)器轉(zhuǎn)發(fā)請(qǐng)求至目標(biāo)服務(wù)器,得到結(jié)果再轉(zhuǎn)發(fā)給前端,但是最終發(fā)布上線時(shí)如果web應(yīng)用和接口服務(wù)器不在一起仍會(huì)跨域
在vue.config.js
文件,新增以下代碼
amodule.exports = {
devServer: {
host: '127.0.0.1',
port: 8084,
open: true,// vue項(xiàng)目啟動(dòng)時(shí)自動(dòng)打開瀏覽器
proxy: {
'/api': { // '/api'是代理標(biāo)識(shí),用于告訴node,url前面是/api的就是使用代理的
target: "http://xxx.xxx.xx.xx:8080", //目標(biāo)地址,一般是指后臺(tái)服務(wù)器地址
changeOrigin: true, //是否跨域
pathRewrite: { // pathRewrite 的作用是把實(shí)際Request Url中的'/api'用""代替
'^/api': ""
}
}
}
}
}
通過axios
發(fā)送請(qǐng)求中,配置請(qǐng)求的根路徑
axios.defaults.baseURL = '/api'
方案二
此外,還可通過服務(wù)端實(shí)現(xiàn)代理請(qǐng)求轉(zhuǎn)發(fā)
以express
框架為例
var express = require('express');
const proxy = require('http-proxy-middleware')
const app = express()
app.use(express.static(__dirname + '/'))
app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false
}));
module.exports = app
方案三
通過配置nginx
實(shí)現(xiàn)代理
server {
listen 80;
# server_name xxx.xxx.com;
location / {
root /var/www/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://127.0.0.1:3000;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
以上就是關(guān)于“vue的跨域問題怎么解決”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。