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

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

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

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

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

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

        .env.development内容如下：

VITE_APP_PROXY_BASE_API='/proxyCustomerApi-dev'

        .env.production内容如下：

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中添加如下代码（代码中有相关注释）：

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), ''), // 重写真实路径,替换/apibypass: (req, res, options) => {const proxyUrl = options.target + options.rewrite(req.url);console.log(`真实请求的完整地址proxyUrl: ${proxyUrl}`);},},},},};
});

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

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.在自己出现跨域报错的接口处修改成类似如下代码片段：

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标签配置：

{"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】，内容大致如下（注意看注释）：

# 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前端项目的serverserver {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反向代理配置（注意看注释）：

# /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完整内容如下：

# 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前端项目的serverserver {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文件夹并上传到服务器，刷新线上网址发现接口可以请求拿到数据了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/213375.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

银行插件导致的Outlook客户端无法连接服务器问题

银行插件导致的Outlook客户端无法连接服务器问题

问题现象 最近遇到好些同事出现outlook客户端无法连接服务器的情况，具体现象就是右下角一直显示【正在尝试连接…】或者【需要密码】，点击【需要密码】按钮，输密码的弹窗是一个完全空白的页面。 此时打开word，右上角那里去登录o…
阅读更多...
LeetCode19. Remove Nth Node From End of List

LeetCode19. Remove Nth Node From End of List

文章目录 一、题目二、题解 一、题目 Given the head of a linked list, remove the nth node from the end of the list and return its head. Example 1: Input: head [1,2,3,4,5], n 2 Output: [1,2,3,5] Example 2: Input: head [1], n 1 Output: [] Example 3: I…
阅读更多...
智能优化算法应用：基于缎蓝园丁鸟算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于缎蓝园丁鸟算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于缎蓝园丁鸟算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用：基于缎蓝园丁鸟算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.缎蓝园丁鸟算法4.实验参数设定5.算法…
阅读更多...
自动数据增广论文笔记 | AutoAugment: Learning Augmentation Strategies from Data

自动数据增广论文笔记 | AutoAugment: Learning Augmentation Strategies from Data

谷歌大脑出品 paper: https://arxiv.org/abs/1805.09501 这里是个论文的阅读心得，笔记，不等同论文全部内容 文章目录 一、摘要1.1 翻译1.2 笔记 二、(第三部分)自动增强:直接在感兴趣的数据集上搜索最佳增强策略2.1 翻译2.2 笔记 三、(第四部分)实验与结…
阅读更多...
为什么说数字化转型能帮助企业降本增效？

为什么说数字化转型能帮助企业降本增效？

引言 数字化转型是当今商业领域中的关键议题，它不仅是技术的应用，更是一种战略性的变革，对企业而言具有重要意义。在这个数字化时代，企业需要不断适应和采纳新技术，以获得竞争优势并提高效率。 数字化转型旨在将传统业…
阅读更多...
匿名内部类 - ( 零基础学java )

匿名内部类 - ( 零基础学java )

Java-匿名内部类 我们先分析匿名内部类的结构,然后逐一解释,最后以下罗列的问题都会在下面的内容中一一得到解答 : 匿名内部类到底是什么? 我们为什么要学习匿名内部类 ? 匿名内部类都有怎样的作用 ? 匿名内部类应用的场景又有哪些 ? 匿名内部类是否有缺陷? 让我们…
阅读更多...
Java (JDK 21) 调用 OpenCV (4.8.0)

Java (JDK 21) 调用 OpenCV (4.8.0)

Java 调用 OpenCV 一.OpenCV 下载和安装二.创建 Java Maven 项目三.其他测试 一.OpenCV 下载和安装 Open CV 官网 可以下载编译好的包，也可以下载源码自行编译 双击安装 opencv-4.8.0-windows.exe 默认为当前目录 安装即解压缩 根据系统位数选择 将 x64 目录下 op…
阅读更多...
外汇交易到哪开户?外汇开户所需流程有哪些?

外汇交易到哪开户?外汇开户所需流程有哪些?

外汇交易是一种全球性的金融市场活动，参与者可以通过买入或卖出不同国家的货币来获取利润。在进行外汇交易之前，开设一个外汇交易账户是必要的。本文将介绍外汇交易开户的重要性、选择外汇交易平台的因素以及开户所需的基本流程，帮助读者更好…
阅读更多...
开往渤海的列车：沧港铁路如何扮演产业带城市生态共赢的关键先生

开往渤海的列车：沧港铁路如何扮演产业带城市生态共赢的关键先生

新时代构建新格局，新格局呼唤新作为。在交通强国战略背景下，铁路运输企业需要如何彰显“铁担当”？ 逢山开路、遇水架桥，身处重要地理区位，沧州沧港铁路有限公司（以下简称“沧港铁路”）不断抢抓…
阅读更多...
并查集带压缩路径的find

并查集带压缩路径的find

目录 原因： 优化： 原因： 当路径比较特殊，如图： 非常深，最底层进行find时，循环找根（或者递归找），消耗就比较大。 我们可以进行优化。 优化： &…
阅读更多...
【C++】C++异常语法、使用、规范、异常安全及异常的优缺点

【C++】C++异常语法、使用、规范、异常安全及异常的优缺点

1. C异常概念 异常是一种处理错误的方式，当一个函数发现自己无法处理的错误时就可以抛出异常，让函数的直接或间接的调用者处理这个错误。 throw: 当问题出现时，程序会抛出一个异常。这是通过使用 throw 关键字来完成的。catch: 在您想要处理…
阅读更多...
给你的Python程序添点Emoji魔法：使用Emoji模块增添趣味和个性！

给你的Python程序添点Emoji魔法：使用Emoji模块增添趣味和个性！

当你想给你的Python程序增添一些趣味和个性时，Emoji模块是一个很有用的工具。Emoji模块允许你在Python中使用各种表情符号，从笑脸到动物，甚至是食物和天气等。在本篇博客中，我们将介绍如何在Python中使用Emoji模块，并展…
阅读更多...
【小白专用】使用PHP创建和操作MySQL数据库，数据表

【小白专用】使用PHP创建和操作MySQL数据库，数据表

php数据库操作 php连接mysql数据库 <?php $hostlocalhost; // 数据库主机名 $username"root"; // 数据库用户名 $password"al6"; // 数据库密码 $dbname"mysql"; // 数据库名 $connIDmysqli_connect($host,$username,$password,$dbn…
阅读更多...
adb push报错：remote couldn‘t create file: Is a directory

adb push报错：remote couldn‘t create file: Is a directory

adb push报错&#xff1a;remote couldn‘t create file: Is a directory 出现这个问题可能是电脑本地目录中包含中文或者是目录地址中多包含了一个/ 比如说以下两种路径 1. test/测试音频文件1/a.mp3 2.test/test_audio/ 这两种都是不可以的&#xff08;我是在as中执行的…
阅读更多...
MQTT服务质量-QoS

MQTT服务质量-QoS

QoS是消息发送方和接收方之间的协议&#xff0c;定义了指定消息发送保证等级。本文将深入探究MQTT中不同的QoS等级。 QoS是什么 MQTT提供三个QoS等级&#xff1a; 最多一次&#xff08;QoS 0&#xff09;至少一次&#xff08;QoS 1&#xff09;确切一次&#xff08;QoS 2&am…
阅读更多...
科技提升安全，基于YOLOv5系列模型【n/s/m/l/x】开发构建商超扶梯场景下行人安全行为姿态检测识别系统

科技提升安全，基于YOLOv5系列模型【n/s/m/l/x】开发构建商超扶梯场景下行人安全行为姿态检测识别系统

在商超等人流量较为密集的场景下经常会报道出现一些行人在扶梯上摔倒、受伤等问题&#xff0c;随着AI技术的快速发展与不断普及&#xff0c;越来越多的商超、地铁等场景开始加装专用的安全检测预警系统&#xff0c;核心工作原理即使AI模型与摄像头图像视频流的实时计算&#xf…
阅读更多...
2024年JAVA招聘行情如何？

2024年JAVA招聘行情如何？

大家都在说Java求职不好找&#xff0c;是真的吗&#xff1f;我们来看看数据。 数据支持&#xff1a;根据TIOBE 5月份的编程语言排行榜&#xff0c;Java仍然是前三名之一。这意味着&#xff0c;Java在开发领域仍然占据重要地位。 而在中国的IT市场中&#xff0c;Java仍然是主要…
阅读更多...
使用alpine镜像部署go应用时踩的坑

使用alpine镜像部署go应用时踩的坑

使用alpine镜像部署go应用时踩的坑 关于交叉编译 实际上我在ubuntu的交叉编译出来的exe并不能在alpine上运行&#xff0c;这边采取拉镜像编译复制出来的做法&#xff0c;部署再用干净的alpine 拉取golang:alpine踩坑 在Dockerhub上可以找到&#xff1a; 然而拉取的alpine中…
阅读更多...
在普通的项目中创建web的功能

在普通的项目中创建web的功能

新增web功能: 1.创建一个新项目&#xff0c;不勾选模板&#xff1a;2.添加web功能&#xff1a; 1.创建一个新项目&#xff0c;不勾选模板&#xff1a; 发现普通项目没有webapp文件夹&#xff0c;即没有web的功能。 2.添加web功能&#xff1a; Add framework support:添加一些…
阅读更多...
VHDL数码管显示控制器设计

VHDL数码管显示控制器设计

题目要求&#xff1a; 初始状态&#xff0c;开关 K1 为低电平&#xff0c;6 个数码管上依次显示 1-6。当 K1 变为高电平时&#xff0c;数据管显示内容依次循环左移&#xff0c;当 K1 变为低电平时&#xff0c;保持当前显示内容。 参考资料&#xff1a;使用VHDL实现动态扫描八位…
阅读更多...
最新文章

Copyright @ 2022~2023