Vue开发模式跨域解决与代理服务器配置
我们从服务器拿数据,跨域的拿不到,于是搭建个代理服务器,中转一下,就可以解决跨域问题了。
1号服务器
// 导入express
let express = require("express");
// 创建一个服务器对象
let app = express();
// 开启一个端口号
app.listen(5566, () => {
console.log("服务器成功开启!端口号5566");
});
//配置中间件,拦截所有的请求
app.use((req, res, next) => {
//允许跨域
// res.setHeader("Access-Control-Allow-Origin", "*");
next();
});
//学生数组
let stus = [
{
no: "1001",
name: "张三",
age: 20,
sex: "男",
},
{
no: "1002",
name: "李四",
age: 22,
sex: "女",
},
{
no: "1003",
name: "王五",
age: 24,
sex: "男",
},
]
// 定义一个get请求接口
app.get("/list", (req, res) => {
res.send(stus);
});
2号服务器
// 导入express
let express = require("express");
// 创建一个服务器对象
let app = express();
// 开启一个端口号
app.listen(7788, () => {
console.log("服务器成功开启!端口号7788");
});
//配置中间件,拦截所有的请求
app.use((req, res, next) => {
//允许跨域
// res.setHeader("Access-Control-Allow-Origin", "*");
next();
});
//汽车数组
let cars = [
{
id: "1001",
name: "奔驰"
},
{
id: "1002",
name: "宝马"
},
{
id: "1003",
name: "奥迪"
},
]
// 定义一个get请求接口
app.get("/list", (req, res) => {
res.send(cars);
});
配置代理
module.exports = {
//取消eslint语法检查
lintOnSave:false,
//devServer是脚手架中的开发服务器
devServer:{
//配置主机名
host:'localhost',
//配置端口号
port:'8080',
//在开发服务器中,配置一个代理服务器地址。
//注意:在开发阶段,通过向当前开发服务器发送ajax请求,当前服务器会将请求转发给配置的代理服务器地址。
// proxy:'http://localhost:5566'
// 配置多个代理服务器地址
proxy:{
// /stu是前缀
'/stu':{
//代理的地址
target:'http://localhost:5566',
//路径重写,因为向真实的后台发送请求时,不需要加前缀
pathRewrite:{
//将地址中,/stu替换成空
'^/stu':''
}
},
'/car':{
target:'http://localhost:7788',
pathRewrite:{
'^/car':''
}
}
}
},
}
Bootstrap
全局 CSS 样式
Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。还有先进的栅格系统。
这是官网,直接link就可以用css样式
网友评论