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 标签需要是 <%= htmlWebpackPlugin.options.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
总结，如果cors的orgin设置了可以允许的域名或者没有设置，可以进行访问该域名，但是如果设置了，需要vue通过proxy来进行代理，但是注意axios的默认axios.defaults.baseURL = 'http://127.0.0.1:3000';不要设置，否者访问不了