（クロスドメイン、設定複数のプロキシを解決するために）プロキシエージェントの使用
まず、エージェントは何ですか
文字通りの意味は、仲買人、オープンプロキシに似て、原理は、ローカル仮想サーバーを作成し、要求されたデータを受信している間に、要求されたデータを送信することで、
サーバのとサーバ間の使用は、インタラクティブ、そこにはクロスドメインの問題ではありませんが、また、完全にクロスドメインを解決するために、独自の独立したフロントエンドの方法に依存しています
VUE CLI3と例
私は今、地元のインターフェースを要求する必要があります
// cli3 vue.config.js
devServer: {
proxy:{
"/api": {
target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
ws: false, // 是否启用websockets
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求 的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { //重写匹配的字段，如果不需要在请求路径上，重写为""
"^/api": "/api"
}
},
},
}
//cli2的放在config文件夹中的index.js 中
dev: {
proxyTable:{
"/api": {
target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
ws: false, // 是否启用websockets
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求 的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { //重写匹配的字段，如果不需要在请求路径上，重写为""
"^/api": "/api"
}
},
},
}
axiosの作成には、この構成beseURL
const ajax = axios.create({
baseURL:"/api",
timeout: 6000,//请求超时时间
})
リクエスト作成
export function getData() { //get
return request({
url: '/search/home',
method: 'GET'
})
}
この試合では、ターゲット/以前、pathRewriteによると、その後、あなたが要求され、AJAXに追加されます。このフィールドに行くためのターゲットにエージェントになります
意味それから、あなたのURL要求が一致するプロキシを満たしているあなたを追加し、おそらくあなたのbeseURLです代理店は何の問題ではない
にもマッチした部分しばらくの取り扱い。
このような仮想サーバの要求があります
http://www.xiongmaoyouxuan.com/api/search/home
しかし、あなたはローカルアドレス要求は次のようになります見ます
複数のエージェントの設定
ただ、エージェントがルールを満たすことができ、あなたの地元の要望を聞かせて
proxy:{
"/api": {
target: "http://www.xiongmaoyouxuan.com",
// ws: true,
changeOrigin: true
pathRewrite: {
"^/api": "/api"
}
},
"/user": {
target: "http://www.xiongmaoyouxuan.com",
// ws: true,
changeOrigin: true
pathRewrite: {
"^/user": "/api"
}
},
},
axiosの作成には、この構成beseURL
const ajax = axios.create({
baseURL:"/",
timeout: 6000,//请求超时时间
})
リクエスト作成
export function getData() { //get
return request({
url: 'api/search/home',
method: 'GET'
})
}
export function getData1() { //get
return request({
url: 'user/search/home',
method: 'GET'
})
}
二つのインターフェース、同インターフェースへのプロキシ要求を通ります。だから、代理店のよりよい理解のかどうかを確認します。私はあなたのコメントエリアに伝えることができます疑います。
