跨域問題產(chǎn)生原因
原因
大部分瀏覽器自帶的保護(hù)措施，限制用戶在一個(gè)域名下請(qǐng)求另一個(gè)域名的數(shù)據(jù)
一、關(guān)于跨域
跨域?qū)τ谇昂蠖碎_發(fā)者來說，就像一塊狗皮膏藥，無論是面試還是開發(fā)中，都會(huì)經(jīng)常遇到。
之所以出現(xiàn)跨域問題，是因?yàn)闉g覽器的同源策略，為了隔離潛在的惡意文件，為了防御來自歪門邪道的攻擊，瀏覽器限制了從同一個(gè)源加載的文檔或腳本與來自另一個(gè)源的資源進(jìn)行交互。
前面我們提到了，前端跑在 8080 端口下，后端跑在 9002 端口下，這種情況就屬于不同的源（域名不同，協(xié)議不同，端口不同），所以 8080 端口下的前端請(qǐng)求直接訪問 9002 端口下的后端接口時(shí)就訪問失敗了。
vue前端解決辦法
Nodejs 代理
在 Nodejs 出現(xiàn)之前，JavaScript 編寫的程序通常需要在用戶的瀏覽器上執(zhí)行，Node.js 出現(xiàn)后，JavaScript 也能用于服務(wù)端編程了。Nodejs 一系列的內(nèi)置模塊使得程序可以脫離 IIS、Apache 這種 Web 服務(wù)作為獨(dú)立的服務(wù)器執(zhí)行。
我們使用 Nodejs 來解決跨域問題的思路就是，在本地創(chuàng)建一個(gè)虛擬服務(wù)器，對(duì) 8080 端口下的前端請(qǐng)求進(jìn)行代理，同時(shí)接收 9002 端口下的服務(wù)器端響應(yīng)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)出現(xiàn)跨域問題了。文章來源：http://www.zghlxwxcb.cn/news/detail-825050.html
第一步，配置 Nodejs 代理服務(wù)
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:9002', // 你請(qǐng)求的第三方接口
changeOrigin: false, // 在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問題
pathRewrite: { // 路徑重寫，
'^/api': '' // 替換target中的請(qǐng)求地址，也就是說以后你在請(qǐng)求http://api.codingmore.top/v2/XXXXX這個(gè)地址的時(shí)候直接寫成/api即可。
}
},
},
}
第二步，配置前端訪問請(qǐng)求路徑
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
VUE_APP_BASE_API: '"/api"'
// VUE_APP_BASE_API: '"http://localhost:9002"'
})
第三步，重啟前端服務(wù)
node后端解決辦法
方法1：設(shè)置express
var express = require('express');
var app = express();
//跨域問題解決方面
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost:8080');//僅支持配置一個(gè)域名
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
res.header('Access-Control-Allow-Credentials',true)//允許客戶端攜帶驗(yàn)證信息
next();
});
方法2：使用cors
npm install cors
//跨域問題解決方面
const cors = require('cors');
app.use(cors({
origin: ['http://localhost:8080','http://www.baidu.com'],//可設(shè)置多個(gè)跨域域名
credentials: true//允許客戶端攜帶驗(yàn)證信息
}))
注意，這里得自己得域名必須帶上www，否則照樣不能實(shí)現(xiàn)跨域，因?yàn)闉g覽器去請(qǐng)求服務(wù)器時(shí)，是完整的域名，所以后端驗(yàn)證也應(yīng)該是完整的域名。文章來源地址http://www.zghlxwxcb.cn/news/detail-825050.html
到了這里，關(guān)于node+vue+express開發(fā)環(huán)境下接口數(shù)據(jù)傳遞中的跨域問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
