各环境中跨域的配置

一.angular环境配置跨域

1.在根目录新建proxy.conf.json文件

{
  "/api": {
    "target": "http://接口路径",
    "sercure" :true,
    "changeOrigin":true,
    "pathRewrite": {
     "^/api": ""
    }
  }
}

2.在angular.json文件中配置引用

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "recruit-hr-desktop": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "architect": {
                "build": {
                    ...
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "recruit-hr-desktop:build",
                        "proxyConfig":"proxy.conf.json",
                        "disableHostCheck": true
                    }
                }
            }
        }
}

二.在vue2.0以上环境配置跨域

在根目录的vue.config.js中设置：

module.exports = {
  configureWebpack: (config) => {
    config.entry.app = ['./src/main.js']
  },
  chainWebpack: (config) => {
    config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
  },
  // webpack-dev-server 相关配置
  devServer: {
    host: 'localhost',
    // host: '0.0.0.0', // 开启设置(后端通过ip和端口号可以访问前端项目)
    port: 8090,
    https: false,
    open: true,
    hotOnly: false,
    proxy: {
      // 配置跨域
      '/api': {
        target: 'http://接口地址1',
        ws: true,
        changOrigin: true, // 允许跨域
        pathRewrite: {
          '^/admin': ''
        }
      },
      '/branch': {
        target: 'http://接口地址2',
        ws: true,
        changOrigin: true, // 允许跨域
        pathRewrite: {
          '^/branch': ''
        }
      },
      '/test': {
        target: 'http://接口地址3',
        ws: true,
        changOrigin: true, // 允许跨域
        pathRewrite: {
          '^/test': ''
        }
      }
    },
    before: app => {}
  },

  css: {
    loaderOptions: {
      stylus: {
        'resolve url': true,
        'import': [
          './src/theme'
        ]
      },
      sass: {
        data: '@import "~@/style/variables.scss";'
      }
    }
  }
}

 

三.gulp配置跨域

var gulp = require('gulp');
var connect = require('gulp-connect');
var proxy = require('http-proxy-middleware');

gulp.task('connect', function () {
    connect.server({
        root: './',
        livereload: true,
        port: 8000,
        middleware: function (connect, opt) {
            return [
                proxy('/api', {
                    target: 'http://地址1',
                    changeOrigin:true
                }),
                proxy('/branch', {
                    target: 'http://地址2',
                    changeOrigin:true
                }),
                proxy('/test', {
                    target: 'http://地址3',
                    changeOrigin:true
                })
            ]
        }
    });
});

gulp.task('watch', function () {
    gulp.watch(['./*.html'], ['html']);

});

gulp.task('html', function () {
    gulp.src('./*.html')
        .pipe(connect.reload());
});


//运行Gulp时，默认的Task
gulp.task('default', ['connect', 'watch']);

四.webpack配置跨域

目录结构

config文件

• index.js
• dev.env.js
• test.env.js
• prod.env.js

1.在config目录下的index.js文件中配置：

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
    build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        productionSourceMap: true,
        devtool: '#source-map',
        productionGzip: true,
        productionGzipExtensions: ['js', 'css'],
        bundleAnalyzerReport: process.env.npm_config_report
    },
    dev: {
        env: require('./dev.env'),
        port: 8080,
        autoOpenBrowser: false,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'http://接口地址1',
                changeOrigin: true, //是否跨域
                pathRewrite: {
                '^/api': ''
                }
            },
        },
        cssSourceMap: true,
        cacheBusting: true,
    }
}

2.在config目录下各env.js文件中做相应配置：

module.exports = {
  NODE_ENV: '"production"',
  baseUrl: '"/api/"'
}