Shang Silicon Valley で Ajax のコースを勉強していたとき、初めてクロスドメインの問題に遭遇しました –オリジン 'http://localhost:8080' から 'http://localhost:5000/students' にある XMLHttpRequest へのアクセスCORS ポリシーによってブロックされました: 要求されたリソースエラーに 'Access-Control-Allow-Origin' ヘッダーが存在しません。その時点で、ヘッダー情報を設定することで解決されました - Access-Control-Allow-Origin の値を設定しますヘッダー情報を「*」に変更する はい。この記事では主に、プロキシ サーバーを有効にすることでクロスドメインの問題を解決します。
エラーを報告する
シーンをシミュレートするには、axios を介して目的のデータを取得します
<template>
<div>
<button @click='getStudents'>获取学生信息</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
methods: {
getStudents() {
axios.get('http://localhost:5000/students') //获取数据的网址
.then(
response => {
console.log('请求成功' + response.data);
},
erro => {
console.log('请求失败' + erro.message);
}
)
}
}
}
</script>
ブラウザーでは、ボタンをクリックして情報を取得しますが、コンソールにエラーが報告されます。Access to XMLHttpRequest at 'http://localhost:5000/students' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
これは、ドメインを越えて、同一生成元ポリシー(「プロトコル名 + ホスト名 + ポート番号」が同じ) に違反したためです。
コードを実行すると、ポート番号が 8080 のページが表示されます。データにアクセスするために必要なページのポート番号は 5000 です。これは、クロスドメインがあることを示しています。
解決
プロキシ サーバーを使用してリクエストを転送し、異なるオリジンによるクロス ドメインの問題を回避できます。たとえば、アプリケーションでは、リクエストをプロキシ サーバーに送信できます。プロキシ サーバーはリクエストをターゲット サイトに送信し、レスポンスをアプリケーションに返します。
公式ドキュメントを確認してください、ドキュメントにそのような記述があります
フロントエンド アプリケーションとバックエンド API サーバーが同じホストで実行されていない場合、開発環境で API サーバーに API 要求をプロキシする必要があります。この質問は
vue.config.js、devServer.proxyのオプションで設定できます。
devServer.proxy開発環境の API サーバーを指す文字列にすることができます。
構成ファイルにdevServer 構成を追加するだけで、プロキシ サーバーを有効にする必要があります(構成内の情報を変更するたびに、足場: ノード実行サーバーを再起動する必要があります)。
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
pages: {
index: {
//入口
entry: 'src/main.js',
}
},
transpileDependencies: true,
lintOnSave: false, //关闭语法检查
//开启代理服务器
devServer: {
proxy: 'http://localhost:5000' //指向的是需要数据的网络端口号
}
})
同時に、axios リクエスト データのアドレスはプロキシ サーバーを指しています。
データリクエスト成功
複数のプロキシを構成する
複数のサービスにアクセスする場合、複数のプロキシ サーバーを構成する必要があります。
このマシンのプレフィックスを指定します (ps: このマシンのプレフィックスは、プロトコル名、ホスト番号、およびポート番号を無視するプレフィックスです)。
<template>
<div>
<button @click='getStudents'>获取学生信息</button>
<button @click='getCars'>获取汽车信息</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
methods: {
getStudents() {
axios.get('http://localhost:8080/msg1/students')
.then(
response => {
console.log('请求成功', response.data);
},
erro => {
console.log('请求失败', erro.message);
}
)
},
getCars() {
axios.get('http://localhost:8080/msg2/cars')
.then(
response => {
console.log('请求成功', response.data);
},
erro => {
console.log('请求失败', erro.message);
}
)
},
}
}
</script>
vue.config.js では、複数のプロキシを追加します. プロキシ サーバーは、対応するデータを転送できるようにプレフィックスを構成します. プロキシ サーバーは、パスを書き換えるために pathRewrite も構成する必要があります. プレフィックスをクリアした後、ターゲット サーバーに移動しますプレフィックスがクリアされていない場合、ターゲットサーバーでデータを見つけることができません
vue.config.js：
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
pages: {
index: {
//入口
entry: 'src/main.js',
}
},
transpileDependencies: true,
lintOnSave: false, //关闭语法检查
//开启代理服务器
devServer: {
proxy: {
'/msg1': {
target: 'http://localhost:5000', //代理目标的基础路径
pathRewrite: {
'^/msg1': '' }, //一定要路径重写，不然
ws: true,
changeOrigin: true
},
'/msg2': {
target: 'http://localhost:5001',
pathRewrite: {
'^/msg2': '' },
}
}
}
})