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 setupapp.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 handlerapp.use(function(req, res, next) { next(createError(404));});// error handlerapp.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 = falsenew 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 /srcimport 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';不要设置，否者拜访不了