关于vue.js:express和vue模拟跨域访问本地开发环境为主打包后不行

1. 生成 express 我的项目，开启一个本地服务
创立一个 login，路由，cors 引入要
npm i cors --save，设置 origin 来容许某一个拜访；app.js 和 login.js 别离是
app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var cors =require('cors');


var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var loginRouter = require('./routes/login');
const {METHODS} = require('http');

var app = express();

app.use(
  cors({
    origin:'http://localhost:8080',// 表明该申请起源地址
    // 'Access-Control-Request-Method':'post',
    allowedHeaders:['Conten-Type','Authorization']
  }) 
 )

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/login', loginRouter)

// catch 404 and forward to error handler
app.use(function(req, res, next) {next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

login.js

var express = require('express');
var router = express.Router();

/* GET login page. */
router.get('/', function(req, res, next) {res.json({name:'admin',pwd:'123456'});
});

module.exports = router;

npm run start开启 express 的我的项目，输出地址 http://127.0.0.1:3000/login 查看登录的用户，明码数据
2.vue-cli3 建一个我的项目，用来拜访登录数据，axios 插件要引入npm i axios --save
vue.config.js

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
    ? '/'
    : '/',
    assetsDir: "assets",
    filenameHashing: false,
    lintOnSave: 'warning',
    devServer: {
        host: "localhost",
        port: '1000',
        https: false,
        open: false,
        proxy: {
            "/login": {
                target: "http://127.0.0.1:3000",// 要拜访的接口域名
                // ws: true,// 是否启用 websockets
                changeOrigin: true, // 开启代理：在本地会创立一个虚构服务端，而后发送申请的数据，// 并同时接管申请的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                // pathRewrite: {
                //     '^/api': ''// 这里了解成用'/api' 代替 target 外面的地址, 比方我要调用
                //     //'http://40.00.100.100:3002/user/add'，间接写 '/api/user/add' 即可
                // }
            }


        },
        overlay: {
            warnings: true,
            errors: true
          },
    },
    pages: {
        index: {
          // page 的入口
          entry: 'src/main.js',
          // 模板起源
          template: 'public/index.html',
          // 在 dist/index.html 的输入
          filename: 'index.html',
          // 当应用 title 选项时，// template 中的 title 标签须要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: '对于配置的练习',
          // 在这个页面中蕴含的块，默认状况下会蕴含
          // 提取进去的通用 chunk 和 vendor chunk。chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当应用只有入口的字符串格局时，// 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。// 输入文件名会被推导为 `subpage.html`。// subpage: 'src/subpage/main.js'
      }
    
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'  // 引入

Vue.prototype.$axios = axios;
axios.defaults.baseURL = '';

Vue.config.productionTip = false

new Vue({
  router,
  render: function (h) {return h(App) }
}).$mount('#app')

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {HelloWorld},
  mounted(){this.$axios.get('/login').then(res=>{console.log(res)
      }).catch(err=>{console.log(err)
      })
  }
}
</script>

总结，如果 cors 的 orgin 设置了能够容许的域名或者没有设置，能够进行拜访该域名，然而如果设置了，须要 vue 通过 proxy 来进行代理，然而留神 axios 的默认 axios.defaults.baseURL = 'http://127.0.0.1:3000'; 不要设置，否者拜访不了