vue開発環境によるドメイン間解決のいくつかの方法

ソリューション
ドメイン間解決の方法多くのバックエンドには,要求フロントエンドにjqueryがあるjsonp,scriptの要求転送を設定するなど,ドメイン間問題が発生する主な場合はブラウザの同源戦略であるため,中間でエージェント要求をすればドメイン間問題を巧みに回避できる.
一、proxyTable属性を使用する
ここでvue足場で生成される標準項目を基準とします.一般的にプロジェクトconfigディレクトリの下にindexファイルがあります.フォーマットは次のとおりです.

'use strict'
const path = require('path')
module.exports = {
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'http://localhost:7001',//      
                changeOrigin: true,//      
                pathRewrite: {
                    '^/api': '/api',//  ,
                }
            }
        },
        host: '192.168.0.104',
        port: 8081,
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false,
        useEslint: true,
        showEslintErrorsInOverlay: false,
        devtool: 'eval-source-map',
        cacheBusting: true,
        cssSourceMap: false,
    },

}

二、ngnixにおけるproxyエージェントによるリクエストの転送
三、webpackを使用するプラグインバックエンドプログラムエージェント
 もちろん、上記の2つの方法はバックエンドの協力とサーバ構成の変更が必要です.彼らの協力を必要としない方法があります.私たちは自分でできます.私たち自身がバックエンドプログラムをエージェントとして起動します.そして、すべてのリクエストをサーバに転送します.ここではnodeのパッケージhttp-proxy-middlewareを使用します.キーコード(express)は次のとおりです.

var express = require('express');
var proxy = require('http-proxy-middleware');


var proxyTable = config.dev.proxyTable;



var app = express();

app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}



Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
})