记：vite3+vue3+axios前端项目跨域题目办理【前端和服务器nginx配置】 - ToB企服应用市场:ToB评测及商务社交产业平台

VITE_APP_PROXY_BASE_API='/proxyCustomerApi-dev'

复制代码

VITE_APP_PROXY_BASE_API='/proxyCustomerApi-pro'

复制代码

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import * as path from 'path';
... ...
export default defineConfig((env) => {
// 获取到当前开发模式（dev/pro）下对应的环境文件对象值
const evnMap = loadEnv(env.mode, process.cwd());
// console.log(`evnMap = ${JSON.stringify(evnMap)}`);
return {
... ...
server: {
host: '0.0.0.0', // ip地址
port: 8088, // 启动端口
// 反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
proxy: {
// 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
// 对应项目根目录 - [.env.development、.env.production]文件中的值
[evnMap.VITE_APP_PROXY_BASE_API]: {
target: 'http://xxx.xx.xx.xx:27005', // 请求报跨域错误的接口域名地址，真实请求地址
changeOrigin: true, // 支持跨域
rewrite: (path) =>
path.replace(new RegExp('^' + evnMap.VITE_APP_PROXY_BASE_API), ''), // 重写真实路径,替换/api
bypass: (req, res, options) => {
const proxyUrl = options.target + options.rewrite(req.url);
console.log(`真实请求的完整地址proxyUrl: ${proxyUrl}`);
},
},
},
},
};
});

复制代码

const http = axios.create({
// baseURL: DOMAIN,
// import.meta.env.VITE_APP_PROXY_BASE_API 对应项目根目录 - [.env.development、.env.production]文件中的值
baseURL: import.meta.env.VITE_APP_PROXY_BASE_API,
timeout: 600000,
... ...
});
export default http;

复制代码

export const chatHistoryRecordApi = {
// 获取所有客服与用户对话列表
getAllCustomerChatListPage: (params) => {
return http({
// import.meta.env.VITE_APP_PROXY_BASE_API 对应项目根目录 - [.env.development、.env.production]文件中的值
baseURL: import.meta.env.VITE_APP_PROXY_BASE_API,
url: `/customer/allChatList`,
method: 'get',
params,
});
},
// 查询指定对话的聊天历史记录
queryCurrentChatHistory: (params) => {
return http({
// import.meta.env.VITE_APP_PROXY_BASE_API 对应项目根目录 - [.env.development、.env.production]文件中的值
baseURL: import.meta.env.VITE_APP_PROXY_BASE_API,
url: `/customer/chatHistory`,
method: 'get',
params,
});
},
};

复制代码

{
"name": "hrosass",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
// dev、build系统会默认添加--mode production/development环境配置
// "dev": "vite" =》"dev": "vite --mode development"
// "build": "vite build" =》"build": "vite build --mode production"
"dev": "vite",
"build": "vite build",
... ...
},
"dependencies": {
... ...
},
"devDependencies": {
... ...
},
"main": "index.js",
... ...
}

复制代码

# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 4096;
client_max_body_size 20M;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
# 加载vue前端项目的server
server {
listen 3004; # 端口
server_name localhost; # 域名
location / {
root /home/view/wallet/dist/; # 打包vue项目后的dist存放路径
index index.html index.htm; # 加载入口html文件
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# Settings for a TLS enabled server.
#
# server {
# listen 443 ssl http2;
# listen [::]:443 ssl http2;
# server_name _;
# root /usr/share/nginx/html;
#
# ssl_certificate "/etc/pki/nginx/server.crt";
# ssl_certificate_key "/etc/pki/nginx/private/server.key";
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 10m;
# ssl_ciphers PROFILE=SYSTEM;
# ssl_prefer_server_ciphers on;
#
# # Load configuration files for the default server block.
# include /etc/nginx/default.d/*.conf;
#
# error_page 404 /404.html;
# location = /40x.html {
# }
#
# error_page 500 502 503 504 /50x.html;
# location = /50x.html {
# }
# }
}

复制代码

# /proxyCustomerApi-pro为前端 .env.production中的指定的值
location /proxyCustomerApi-pro {
# 解决跨域
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Authorization,Refreshtoken,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
# 设置 options 请求处理
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Max-Age' 1728000 always;
add_header 'Content-Type' 'text/plain; charset=utf-8' always;
add_header 'Content-Length' 0 always;
# 对于Options方式的请求返回200或其它码，表示接受跨域请求
return 200;
}
# 设置反向代理 http://://xxx.xx.xx.xx:27005不加/会拼上/proxyCustomerApi-pro 加/不会拼/proxyCustomerApi-pro 由于真实接口请求中没有/proxyCustomerApi-pro这段这里不需要拼上代理服务地址后应添加/ http://xxx.xx.xx.xx:27005/
proxy_pass http://://xxx.xx.xx.xx:27005/; # 后端API地址引起跨域报错的api请求地址
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_http_version 1.1;
proxy_connect_timeout 600;
proxy_read_timeout 600;
proxy_send_timeout 600;
proxy_buffer_size 64k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
# 缓存时间，单位秒。这里设置的是6小时
expires 21600s;
# 收到304响应后，再次请求的时间间隔
proxy_cache_valid 200 304 12h;
}

复制代码

# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 4096;
client_max_body_size 20M;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
# 加载vue前端项目的server
server {
listen 3004; # 端口
server_name localhost; # 域名
location / {
root /home/view/wallet/dist/; # 打包vue项目后的dist存放路径
index index.html index.htm; # 加载入口html文件
try_files $uri $uri/ /index.html;
}
# /proxyCustomerApi-pro为前端 .env.production中的指定的值
location /proxyCustomerApi-pro {
# 解决跨域
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Authorization,Refreshtoken,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
# 设置 options 请求处理
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Max-Age' 1728000 always;
add_header 'Content-Type' 'text/plain; charset=utf-8' always;
add_header 'Content-Length' 0 always;
# 对于Options方式的请求返回200或其它码，表示接受跨域请求
return 200;
}
# 设置反向代理 http://://xxx.xx.xx.xx:27005不加/会拼上/proxyCustomerApi-pro 加/不会拼/proxyCustomerApi-pro 由于真实接口请求中没有/proxyCustomerApi-pro这段这里不需要拼上代理服务地址后应添加/ http://xxx.xx.xx.xx:27005/
proxy_pass http://://xxx.xx.xx.xx:27005/; # 后端API地址引起跨域报错的api请求地址
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_http_version 1.1;
proxy_connect_timeout 600;
proxy_read_timeout 600;
proxy_send_timeout 600;
proxy_buffer_size 64k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
# 缓存时间，单位秒。这里设置的是6小时
expires 21600s;
# 收到304响应后，再次请求的时间间隔
proxy_cache_valid 200 304 12h;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# Settings for a TLS enabled server.
#
# server {
# listen 443 ssl http2;
# listen [::]:443 ssl http2;
# server_name _;
# root /usr/share/nginx/html;
#
# ssl_certificate "/etc/pki/nginx/server.crt";
# ssl_certificate_key "/etc/pki/nginx/private/server.key";
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 10m;
# ssl_ciphers PROFILE=SYSTEM;
# ssl_prefer_server_ciphers on;
#
# # Load configuration files for the default server block.
# include /etc/nginx/default.d/*.conf;
#
# error_page 404 /404.html;
# location = /40x.html {
# }
#
# error_page 500 502 503 504 /50x.html;
# location = /50x.html {
# }
# }
}

复制代码