VUE部署到NGINX如何访问后端
本文将从以下几个方面详细介绍如何将Vue部署到Nginx并访问后端：
一、配置反向代理
1、在Vue项目的config/index.js文件中添加以下代码：
module.exports = {
dev: {
// ...
proxyTable: {
'/api': {
target: 'http://your_backend_server_ip:port',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
// ...
}
}其中，/api为代理的路径，target为后端服务的地址。changeOrigin设置为true，则请求头中的host会设置成target的域名，即可以跨域访问。pathRewrite将/api替换成“”空字符串，例如/api/user会被替换成/user，这是Nginx需要的统一路径。
2、修改Vue项目的main.js文件（或者在某个组件中import）。添加以下代码：
import axios from 'axios'
// 设置axios的默认请求路径
axios.defaults.baseURL = '/api'3、修改Nginx的配置文件，在location / {}中添加以下代码：
location / {
# ...
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_pass http://your_backend_server_ip:port;
}其中，设置proxy_pass为后端服务所在的地址。修改完毕后重启Nginx服务。
二、CORS跨域访问
1、在Nginx配置文件中添加以下代码：
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Range';
add_header 'Access-Control-Allow-Credentials' 'true';2、在后端服务的响应头中添加以下代码：
Access-Control-Allow-Origin: *3、在前端代码中使用axios发送请求时，设置withCredentials为true。以下是示例代码：
axios.get('/user', {
withCredentials: true
})三、HTTPS协议
1、购买SSL证书并发布到Nginx服务器上。
2、在Nginx配置文件中添加以下代码：
server {
listen 443 ssl;
server_name your_domain_name;
ssl_certificate /path/to/your_domain_name.crt;
ssl_certificate_key /path/to/your_domain_name.key;
location / {
# ...
}
}其中，your_domain_name为域名，/path/to/your_domain_name.crt和/path/to/your_domain_name.key为SSL证书与私钥的路径。
四、Nginx的负载均衡
在Nginx的配置文件中添加以下代码：
upstream backend_servers {
server your_backend_server1_ip:port;
server your_backend_server2_ip:port;
server your_backend_server3_ip:port;
}
server {
listen 80;
server_name your_domain_name;
location / {
proxy_pass http://backend_servers;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}其中，backend_servers为后端服务器组名，包含多个后端服务器。我们将所有的后端服务器组织成一个组，然后按照一定的策略进行分发，实现负载均衡的目的。
五、Nginx的缓存
在Nginx的配置文件中添加以下代码：
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m;
server {
listen 80;
server_name your_domain_name;
location / {
proxy_cache my_cache;
proxy_cache_valid 200 304 12h;
proxy_cache_valid 301 1d;
proxy_cache_valid 404 1m;
proxy_cache_bypass $http_pragma;
proxy_cache_revalidate on;
}
}其中，将缓存存储到/var/cache/nginx目录下，my_cache为缓存的名称，10m为缓存的大小。在location / {}中对缓存进行设置，例如：
proxy_cache_valid 200 304 12h：设置2XX和3XX状态码的响应缓存有效期为12小时。 proxy_cache_valid 301 1d：设置301状态码的响应缓存有效期为1天。 proxy_cache_bypass $http_pragma：根据请求头判断是否需要使用缓存。 proxy_cache_revalidate on：不使用缓存验证。
