记：vite3+vue3+axios前端项目跨域问题解决【前端和服务器nginx配置】

日渐消瘦 - 来自一个高龄程序员的心声2023-12-14 15:34

前言：什么是跨域，网上一搜一大把，所以这里直接跳过，直入主题。

处理方式：不通过后端处理跨域，通过前端+服务器nginx处理。

1.前端涉及处理跨域的必要配置（开发环境、生产环境）：vite3、vue3、axios

2.服务器涉及处理跨域的配置（生产环境）：nginx【主要用到其配置文件nginx.conf】

3.配置开发环境【跟目录下分别创建：.env.development、.env.production】

.env.development内容如下：

javascript 复制代码 
VITE_APP_PROXY_BASE_API='/proxyCustomerApi-dev'

.env.production内容如下：

javascript 复制代码 
VITE_APP_PROXY_BASE_API='/proxyCustomerApi-pro'

tips: .env.development、.env.production中的常量命名须以"VITE_"开头，这里定义的常量为VITE_APP_PROXY_BASE_API，值分别为"/proxyCustomerApi-dev"、"/proxyCustomerApi-pro"用以区分开发环境和生产环境，值可自定义为"/+自己想定义的内容"

4.前端vite.config.js中添加如下代码（代码中有相关注释）：

javascript 复制代码 
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}`);
					},
				},
			},
		},
	};
});

5.在自己封装好的axios js文件中修改下axios.create中的配置，代码如下：

javascript 复制代码 
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;

6.在自己出现跨域报错的接口处修改成类似如下代码片段：

javascript 复制代码 
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,
		});
	},
};

至此前端跨域配置部分处理完成，可以调试开发环境【本地调试】了。

确保根目录下的package.json文件中存在scripts标签配置：

javascript 复制代码 
{
	"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",
	... ...
}

本地调试命令行中执行（我项目是用的yarn来运行）：yarn run dev，发现接口可以请求拿到数据了。但在线上生产环境下还是会报错，如果只需要本地调试那到这里就完成了！！！

接下来处理生产环境（线上模式）下的跨域报错问题，由于刚刚前端的配置中已经加上了对生产环境的代理配置，其实也就是根目录下的这个文件【.env.production】。

7.本地连接上服务器，且服务器已配置好Nginx，找到Nginx的运行配置文件【nginx.conf】，内容大致如下（注意看注释）：

bash 复制代码 
# 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 {
#        }
#    }

}

8.往server { location / { } }下边添加如下location反向代理配置（注意看注释）：

bash 复制代码 
# /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;
        }

9.配置后的nginx.conf完整内容如下：

bash 复制代码 
# 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 {
#        }
#    }

}

10.执行nginx命令【sudo service nginx reload】使配置生效，至此线上生产环境跨域配置完成。

调试线上跨域问题是否解决，前端项目执行：yarn run build打包线上版本生成dist文件夹并上传到服务器，刷新线上网址发现接口可以请求拿到数据了。

相关推荐
nothing_more_than3 小时前
draggable的el-dialog实现对话框标题可以选择
javascript·vue.js·element-plus
小镇程序员3 小时前
vue2 src自定义事件
前端·javascript·vue.js
炒毛豆4 小时前
vue3+echarts+ant design vue实现进度环形图
javascript·vue.js·echarts
AlgorithmAce6 小时前
Live2D嵌入前端页面
前端
nameofworld6 小时前
前端面试笔试（六）
前端·javascript·面试·学习方法·递归回溯
别拿曾经看以后~6 小时前
原生Android调用uniapp项目中的方法
android·vue.js·uni-app
前端fighter6 小时前
js基本数据新增的Symbol到底是啥呢？
前端·javascript·面试
流着口水看上帝6 小时前
JavaScript完整原型链
开发语言·javascript·原型模式
guokanglun6 小时前
JavaScript数据类型判断之Object.prototype.toString.call() 的详解
开发语言·javascript·原型模式
GISer_Jing6 小时前
从0开始分享一个React项目：React-ant-admin
前端·react.js·前端框架
热门推荐
01Docker 夺命连环 15 问02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07抖音的互联网架构08使用MaxKB添加本地部署的Ollama大语言模型搭建智能聊天系统09RAG 实践- Ollama+RagFlow 部署本地知识库10国内外大模型汇总：Open AI大模型、Google大模型、Microsoft大模型、文心一言大模型、通义千问大模型、字节豆包大模型、智普清言大模型