Vue2跨域配置打包上线流程
一、Vue项目配置跨域问题
(1)跨域的概念
后端开发的时候，采用微服务来进行开发。
每个开发者都有自己的项目，最后整合在一起进行通信。微服务开发
前端还需要考虑配置跨域问题
跨域：因为浏览器的同源策略（安全策略），导致我们无法在浏览器中访问（协议、端口、ip）不同的服务器
<html>
<link href="./index.css">
<img src="./index.js">
<script>
const baseURL = http://127.0.0.1:3000
const res = await axios.get(baseURL+"/users/find")
</script>
</html>
获取css代码：http://127.0.0.1:8080/index.css
获取js代码：http://127.0.0.1:8080/index.js
获取用户数据：http://127.0.0.1:3000/users/find
(2)后端配置跨域的思路
后端配置跨域来解决我们前端报错的问题，也是一种主流方案。
var allowCrossDomain = function (req, res, next) {
// 设置允许跨域访问的请求源（* 表示接受任意域名的请求）
res.header("Access-Control-Allow-Origin", "*");
// 设置允许跨域访问的请求头
res.header("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept,Authorization");
// 设置允许跨域访问的请求类型
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
// 同意 cookie 发送到服务器（如果要发送cookie，Access-Control-Allow-Origin 不能设置为星号）
res.header('Access-Control-Allow-Credentials', 'true');
next();
};
app.use(allowCrossDomain)
后端跨域，前端浏览器就可以直接访问
原理：
- 前端浏览器发现跨服务器获取数据的时候。
- 浏览器先默认发送一个请求到后端，请求类型options
- 当浏览器通过options请求获取到响应一些服务器资源后，
- 继续发送你们自己的请求到后端。
- 后端就可以返回数据到前端
总结：
- 后端 配置跨域，浏览器默认发送两次请求。其中一次options
- options请求目的获取后端允许跨域配置。options请求成功后，服务器响应头会将你的配置传递浏览器
- 浏览器接受这些信息，继续发送请求给后端，不存在跨域问题
跨域问题只存在于浏览器。H5、WEB
小程序、app不存在跨域问题
前端和后端通信
(3)前端配置跨域
服务器和服务器之间不存在跨域。
需要配置代理服务器。前端服务器中在配置一个代理服务器，将指定的请求通过代理服务器转发给后端服务器获取数据
(1)在vue项目跟目录创建vue.config.js文件
这个文件是vue内置的一个webpack配置文件，你写的配置可以覆盖默认webpack
module.exports = {
devServer:{
port:8888,
//配置代理服务器，webpack内置的
proxy:{
//当检测到路径包含了/api 进入代理服务器
//http://127.0.0.1:4001/api/usersAD/getSearch
"/api":{
target:"http://127.0.0.1:4001",
changeOrigin:true,
//表达的意思就是将路径中/api，替换成空字符串
pathRewrite:{
'^/api':''
}
},
}
}
}
(2)代码中修改baseURL
<template>
<div>
<h2>注册页面</h2>
<button @click="fetchData">发送请求</button>
</div>
</template>
<script>
import axios from "axios"
export default {
created(){
console.log("注册组件");
},
methods:{
async fetchData(){
axios.defaults.baseURL = "/api"
const res = await axios({
url:"/usersAD/getSearch",
method:"POST",
data:{}
})
console.log(res);
}
}
}
</script>
当前端访问地址里面包含了/api的时候，代表先默认访问前端服务器。
前端服务器检测路径有/api进入代理服务器。
代理服务器转发请求指定服务器
前端请求只会发送一次。不存在options验证的过程
代理服务器是webpack提供的。
一旦打包后，你的代码静态资源，没有任何webpack
只限于开发环境，打包后正式的前端服务器运行，上面配置都无效
二、配置环境变量
Vue-CLI提供的配置
访问地址为：cli.vuejs.org/zh/guide/mo…
概念：脚手架工具提供了在不同的环境下，配置不同的参数，不同命令来进行项目加载的时候，读取不同文件
你们很多配置可以不用硬编码在代码中
在项目跟目录下面可以配置.env.[mode]
(1)环境配置文件
项目中情况：
- .env:代表了当前项目环境配置
- .env.development:开发环境配置
- .env.production:配置生产环境
- .env.test:配置测试环境
.env.development代码如下
VUE_APP_PROT = 8889
VUE_APP_BASE_URL = "/api"
VUE_APP_TITLE = "woniu"
VUE_APP_SERVER_PATH = "http://127.0.0.1:4001"
环境变量的key必须是VUE_APP开头的。
.env.production 代码如下
VUE_APP_PROT = 9999
VUE_APP_BASE_URL = "/myapis"
VUE_APP_TITLE = "woniu"
(2)在封装请求的时候，将baseURL替换为环境变量
methods:{
async fetchData(){
//任何一个地方，获取系统环境变量
//Nodejs提供一个全局变量 process
// console.log(process.env);
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
const res = await axios({
url:"/usersAD/getSearch",
method:"POST",
data:{}
})
console.log(res);
}
}
在Node环境下面提供的全局变量process，可以直接使用
(3)在vue.config.js文件配置代理内容
const repacePath = "^"+process.env.VUE_APP_BASE_URL
module.exports = {
devServer:{
port:Number(process.env.VUE_APP_PROT),
//配置代理服务器，webpack内置的
proxy:{
//当检测到路径包含了/api 进入代理服务器
//http://127.0.0.1:4001/api/usersAD/getSearch
[process.env.VUE_APP_BASE_URL]:{
target: process.env.VUE_APP_SERVER_PATH,
changeOrigin:true,
//表达的意思就是将路径中/api，替换成空字符串
pathRewrite:{
[repacePath]:''
}
},
}
}
}
根据不同的环境，读取不同配置，进行加载
如果是生产环境npm run build 读取的production配置
三、打包部署
(1)nginx服务器
是一个非常优秀的静态资源服务器。
前端提供的静态资源，nginx在处理静态资源非常高效，
处理并发的能力非常好
nginx并发能达到5万，只是一台服务器。
tomcat服务器，500并发到性能瓶颈。
下载nginx服务器，在你的电脑中启动。就可以访问
conf：里面存放nginx的配置
html：存放的打包静态资源
nginx.exe服务器启动运行文件
(2)前端项目配置好生产环境打包
npm run build
项目目录下面dist目录。
(3)将dist文件夹里面的资源拷贝
将dist里面资源拷贝到nginx服务器html文件夹下面
(4)启动服务器
nginx.exe
你可以在系统进程里面可以看到nginx
(5)浏览器默认访问80端口
127.0.0.1:80
(2)配置nginx的反向代理
前端如果要访问接口，
第一种方式：直接访问后端服务器地址，后端要配置跨域
第二种方式：前端先访问nginx，检测路径有指定符号，通过nginx代理，转发给后端服务器。
在nginx的conf文件夹下面找到nginx.conf
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
try_files $uri /index.html;
}
location /apis/ {
rewrite ^.+apis/?(.*)$ /$1 break;
proxy_pass http://127.0.0.1:4001;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
... 省略后面代码
}
启动项目就可以进行访问了。
