Solución a problemas entre dominios en proyectos de separación de front-end y back-end
| Entorno de desarrollo | Entorno de producción | |
|---|---|---|
| Líder de backstage | CORAZONES | CORAZONES |
| Dominio del front-end | proxy proxy | proxy nginx |
vue.config.js
module.exports = {
devServer: {
proxy: "后台接口地址"
}
}
Después de configurar el proxy, la dirección de nuestra interfaz de solicitud debe ser la dirección del servicio front-end actual
http: // localhost: 3000 -> http: // localhost: 8080
Dado que desea solicitar su propia dirección, no es necesario escribir localhost: 8080 directamente para escribir /
http: // localhost: 8080 / api / banners -> / api / banners
Si usa un proxy, entonces no es necesario usar .env para configurar nuestra dirección de interfaz correspondiente. Porque no importa cuál sea el entorno, se solicita la dirección actual del servidor de aplicaciones para el usuario
Si usa CORS, debe solicitar direcciones de servidor en diferentes entornos de acuerdo con .env durante la compilación. Si usa un proxy, no es necesario que configure diferentes direcciones. Todas están /api/xxxen el formulario
Configurar CORS en segundo plano
El front-end necesita configurar baseURL en la configuración de axios. Los requisitos previos deben configurar el archivo de variable de entorno .env primero
.env.development
Cree un archivo env para el entorno de desarrollo
VUE_APP_BASEURL=http://开发环境接口地址
.env.production
Cree un archivo env para el entorno de producción
VUE_APP_BASEURL=http://生产环境接口地址
Configurar axios
const _axios = axios.create({
baseURL: process.env.VUE_APP_BASEURL
})
Proxy del servidor
Si se usa un proxy, el front-end no necesita configurar BASEURL, porque el servicio front-end (proxy) donde van todas las solicitudes
La dirección de la interfaz se puede escribir directamente en contenido relacionado con "/ xxx"
Configuración del entorno de desarrollo
vue.config.js
Si solo hay un backstage
module.exports = {
devServer: {
proxy: "http://开发环境后台地址",
}
}
Si hay varias interfaces en segundo plano
module.exports = {
devServer: {
proxy: {
"/自定义前端请求时前缀": {
target: "http://开发环境后台地址",
pathRewrite: {
"^/自定义前端请求时前缀": "/后台真实前缀"
}
},
"/自定义前端请求时前缀": {
target: "http://开发环境后台地址",
pathRewrite: {
"^/自定义前端请求时前缀": "/后台真实前缀"
}
}
}
}
}
Tenga en cuenta que al realizar la solicitud, no es necesario configurar la URL base de axios, ni agregar ningún nombre de dominio
En producción
Después de la compilación, ya no tenemos un servidor nodejs, solo una página estática (la configuración del proxy solo puede estar dirigida al entorno de desarrollo)
El entorno de producción necesita configurar nginx
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
# 只能有一个
# 没有使用history
index index.html index.htm;
# 使用了history
try_files $uri $uri/ /index.html;
}
# 配置代理
location /服务器前缀 {
proxy_pass http://要代理的服务器地址（生产服务器地址）;
}
# 配置代理 需要进行rewrite
location /前端请求的前缀 {
rewrite ^/前端请求前缀/(.*)$ /后台接口真实前缀/$1 break;
proxy_pass http://要代理的服务器地址（生产服务器地址）;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}