共计 3379 个字符，预计需要花费 9 分钟才能阅读完成。
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'; 不要设置，否者拜访不了
正文完
