這篇“vue的跨域問題怎么解決”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue的跨域問題怎么解決”文章吧。
創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營產(chǎn)品：成都響應(yīng)式網(wǎng)站建設(shè)公司、品牌網(wǎng)站設(shè)計、成都全網(wǎng)營銷推廣。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡(luò)互動的體驗，以及在手機(jī)等移動端的優(yōu)質(zhì)呈現(xiàn)。成都做網(wǎng)站、網(wǎng)站設(shè)計、移動互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營、VI設(shè)計、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價值服務(wù)。
在vue中，跨域是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本；它是瀏覽器同源策略造成的，是瀏覽器對JS實(shí)施的安全限制。跨域本質(zhì)是瀏覽器基于同源策略的一種安全手段；而同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能。vue跨域的解決方法：1、JSONP；2、CORS；3、Proxy。
跨域是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是瀏覽器同源策略造成的，是瀏覽器對JS實(shí)施的安全限制。
跨域本質(zhì)是瀏覽器基于同源策略的一種安全手段
同源策略（Sameoriginpolicy），是一種約定，它是瀏覽器最核心也最基本的安全功能
所謂同源（即指在同一個域）具有以下三個相同點(diǎn)
協(xié)議相同（protocol）
主機(jī)相同（host）
端口相同（port）
反之非同源請求，也就是協(xié)議、端口、主機(jī)其中一項不相同的時候，這時候就會產(chǎn)生跨域
一定要注意跨域是瀏覽器的限制，你用抓包工具抓取接口數(shù)據(jù)，是可以看到接口已經(jīng)把數(shù)據(jù)返回回來了，只是瀏覽器的限制，你獲取不到數(shù)據(jù)。用postman請求接口能夠請求到數(shù)據(jù)。這些再次印證了跨域是瀏覽器的限制。
解決跨域的方法有很多，下面列舉了三種：
JSONP
CORS
Proxy
而在vue項目中，我們主要針對CORS或Proxy這兩種方案進(jìn)行展開
CORS （Cross-Origin Resource Sharing，跨域資源共享）是一個系統(tǒng)，它由一系列傳輸?shù)腍TTP頭組成，這些HTTP頭決定瀏覽器是否阻止前端 JavaScript 代碼獲取跨域請求的響應(yīng)
CORS 實(shí)現(xiàn)起來非常方便，只需要增加一些 HTTP 頭，讓服務(wù)器能聲明允許的訪問來源
只要后端實(shí)現(xiàn)了 CORS，就實(shí)現(xiàn)了跨域
以koa框架舉例
添加中間件，直接設(shè)置Access-Control-Allow-Origin請求頭
重慶分公司
重慶分公司
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)用中，上線前我們會將Access-Control-Allow-Origin 值設(shè)為我們目標(biāo)host
代理（Proxy）也稱網(wǎng)絡(luò)代理，是一種特殊的網(wǎng)絡(luò)服務(wù)，允許一個（一般為客戶端）通過這個服務(wù)與另一個網(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腳手架工具搭建項目，我們可以通過webpack為我們起一個本地服務(wù)器作為請求的代理對象
通過該服務(wù)器轉(zhuǎn)發(fā)請求至目標(biāo)服務(wù)器，得到結(jié)果再轉(zhuǎn)發(fā)給前端，但是最終發(fā)布上線時如果web應(yīng)用和接口服務(wù)器不在一起仍會跨域
在vue.config.js文件，新增以下代碼
amodule.exports = {
devServer: {
host: '127.0.0.1',
port: 8084,
open: true,// vue項目啟動時自動打開瀏覽器
proxy: {
'/api': { // '/api'是代理標(biāo)識，用于告訴node，url前面是/api的就是使用代理的
target: "http://xxx.xxx.xx.xx:8080", //目標(biāo)地址，一般是指后臺服務(wù)器地址
changeOrigin: true, //是否跨域
pathRewrite: { // pathRewrite 的作用是把實(shí)際Request Url中的'/api'用""代替
'^/api': ""
}
}
}
}
}
通過axios發(fā)送請求中，配置請求的根路徑
axios.defaults.baseURL = '/api'
方案二
此外，還可通過服務(wù)端實(shí)現(xiàn)代理請求轉(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)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
