记：vite3+vue3+axios前端项目跨域题目办理【前端和服务器nginx配置】 ...

嚴華  金牌会员 | 2024-6-26 03:35:11 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 824|帖子 824|积分 2472

前言：什么是跨域，网上一搜一大把，以是这里直接跳过，直入主题。
处理方式：不通过后端处理跨域，通过前端+服务器nginx处理。
1.前端涉及处理跨域的必要配置（开发情况、生产情况）：vite3、vue3、axios
2.服务器涉及处理跨域的配置（生产情况）：nginx【主要用到其配置文件nginx.conf】
3.配置开发情况【跟目录下分别创建：.env.development、.env.production】
        .env.development内容如下：
  1. VITE_APP_PROXY_BASE_API='/proxyCustomerApi-dev'
复制代码
        .env.production内容如下：
  1. 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中添加如下代码（代码中有相关注释）：
  1. import { defineConfig, loadEnv } from 'vite';
  2. import vue from '@vitejs/plugin-vue';
  3. import * as path from 'path';
  4. ... ...
  6. export default defineConfig((env) => {
  7.     // 获取到当前开发模式（dev/pro）下对应的环境文件对象值
  8.         const evnMap = loadEnv(env.mode, process.cwd());
  9.         // console.log(`evnMap = ${JSON.stringify(evnMap)}`);
  10.         return {
  11.                 ... ...
  12.                 server: {
  13.                         host: '0.0.0.0', // ip地址
  14.                         port: 8088, // 启动端口
  15.                         // 反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
  16.                         proxy: {
  17.                                 // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
  18.                                 // 对应项目根目录 - [.env.development、.env.production]文件中的值
  19.                                 [evnMap.VITE_APP_PROXY_BASE_API]: {
  20.                                         target: 'http://xxx.xx.xx.xx:27005', // 请求报跨域错误的接口域名地址，真实请求地址
  21.                                         changeOrigin: true, // 支持跨域
  22.                                         rewrite: (path) =>
  23.                                                 path.replace(new RegExp('^' + evnMap.VITE_APP_PROXY_BASE_API), ''), // 重写真实路径,替换/api
  24.                                         bypass: (req, res, options) => {
  25.                                                 const proxyUrl = options.target + options.rewrite(req.url);
  26.                                                 console.log(`真实请求的完整地址proxyUrl: ${proxyUrl}`);
  27.                                         },
  28.                                 },
  29.                         },
  30.                 },
  31.         };
  32. });
复制代码
5.在自己封装好的axios js文件中修改下axios.create中的配置，代码如下：
  1. const http = axios.create({
  2.         // baseURL: DOMAIN,
  3.         // import.meta.env.VITE_APP_PROXY_BASE_API 对应项目根目录 - [.env.development、.env.production]文件中的值
  4.         baseURL: import.meta.env.VITE_APP_PROXY_BASE_API,
  5.         timeout: 600000,
  6.     ... ...
  7. });
  9. export default http;
复制代码
6.在自己出现跨域报错的接口处修改成类似如下代码片段：
  1. export const chatHistoryRecordApi = {
  2.         // 获取所有客服与用户对话列表
  3.         getAllCustomerChatListPage: (params) => {
  4.                 return http({
  5.                         // import.meta.env.VITE_APP_PROXY_BASE_API 对应项目根目录 - [.env.development、.env.production]文件中的值
  6.                         baseURL: import.meta.env.VITE_APP_PROXY_BASE_API,
  7.                         url: `/customer/allChatList`,
  8.                         method: 'get',
  9.                         params,
  10.                 });
  11.         },
  12.         // 查询指定对话的聊天历史记录
  13.         queryCurrentChatHistory: (params) => {
  14.                 return http({
  15.                         // import.meta.env.VITE_APP_PROXY_BASE_API 对应项目根目录 - [.env.development、.env.production]文件中的值
  16.                         baseURL: import.meta.env.VITE_APP_PROXY_BASE_API,
  17.                         url: `/customer/chatHistory`,
  18.                         method: 'get',
  19.                         params,
  20.                 });
  21.         },
  22. };
复制代码
至此前端跨域配置部分处理完成，可以调试开发情况【本地调试】了。
确保根目录下的package.json文件中存在scripts标签配置：
  1. {
  2.         "name": "hrosass",
  3.         "private": true,
  4.         "version": "0.0.0",
  5.         "type": "module",
  6.         "scripts": {
  7.         // dev、build系统会默认添加--mode production/development环境配置
  8.         // "dev": "vite" =》"dev": "vite --mode development"
  9.         // "build": "vite build" =》"build": "vite build --mode production"
  10.                 "dev": "vite",
  11.                 "build": "vite build",
  12.         ... ...
  13.         },
  14.         "dependencies": {
  15.                 ... ...
  16.         },
  17.         "devDependencies": {
  18.                 ... ...
  19.         },
  20.         "main": "index.js",
  21.         ... ...
  22. }
复制代码
本地调试下令行中执行（我项目是用的yarn来运行）：yarn run dev，发现接口可以请求拿到数据了。但在线上生产情况下还是会报错，如果只需要本地调试那到这里就完成了！！！
接下来处理生产情况（线上模式）下的跨域报错题目，由于刚刚前端的配置中已经加上了对生产情况的代理配置，其实也就是根目录下的这个文件【.env.production】。
7.本地连接上服务器，且服务器已配置好Nginx，找到Nginx的运行配置文件【nginx.conf】，内容大抵如下（注意看注释）：
  1. # For more information on configuration, see:
  2. #   * Official English Documentation: http://nginx.org/en/docs/
  3. #   * Official Russian Documentation: http://nginx.org/ru/docs/
  5. user nginx;
  6. worker_processes auto;
  7. error_log /var/log/nginx/error.log;
  8. pid /run/nginx.pid;
  11. # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
  12. include /usr/share/nginx/modules/*.conf;
  14. events {
  15.     worker_connections 1024;
  16. }
  18. http {
  19.     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
  20.                       '$status $body_bytes_sent "$http_referer" '
  21.                       '"$http_user_agent" "$http_x_forwarded_for"';
  23.     access_log  /var/log/nginx/access.log  main;
  25.     sendfile            on;
  26.     tcp_nopush          on;
  27.     tcp_nodelay         on;
  28.     keepalive_timeout   65;
  29.     types_hash_max_size 4096;
  30.     client_max_body_size 20M;
  32.     include             /etc/nginx/mime.types;
  33.     default_type        application/octet-stream;
  35.     # Load modular configuration files from the /etc/nginx/conf.d directory.
  36.     # See http://nginx.org/en/docs/ngx_core_module.html#include
  37.     # for more information.
  38.     include /etc/nginx/conf.d/*.conf;
  40.                 map $http_upgrade $connection_upgrade {
  41.                 default upgrade;
  42.                 '' close;
  43.                 }
  45.   # 加载vue前端项目的server
  46.   server {
  47.         listen       3004; # 端口
  48.         server_name  localhost; # 域名
  49.         location / {
  50.             root  /home/view/wallet/dist/; # 打包vue项目后的dist存放路径
  51.             index  index.html index.htm; # 加载入口html文件
  52.             try_files  $uri  $uri/  /index.html;
  53.         }
  54.         error_page   500 502 503 504  /50x.html;
  55.         location = /50x.html {
  56.             root   html;
  57.         }
  58.     }
  59.    
  61. # Settings for a TLS enabled server.
  62. #
  63. #    server {
  64. #        listen       443 ssl http2;
  65. #        listen       [::]:443 ssl http2;
  66. #        server_name  _;
  67. #        root         /usr/share/nginx/html;
  68. #
  69. #        ssl_certificate "/etc/pki/nginx/server.crt";
  70. #        ssl_certificate_key "/etc/pki/nginx/private/server.key";
  71. #        ssl_session_cache shared:SSL:1m;
  72. #        ssl_session_timeout  10m;
  73. #        ssl_ciphers PROFILE=SYSTEM;
  74. #        ssl_prefer_server_ciphers on;
  75. #
  76. #        # Load configuration files for the default server block.
  77. #        include /etc/nginx/default.d/*.conf;
  78. #
  79. #        error_page 404 /404.html;
  80. #            location = /40x.html {
  81. #        }
  82. #
  83. #        error_page 500 502 503 504 /50x.html;
  84. #            location = /50x.html {
  85. #        }
  86. #    }
  88. }
复制代码
8.往server { location / { } }下边添加如下location反向代理配置（注意看注释）：
  1. # /proxyCustomerApi-pro为前端 .env.production中的指定的值
  2. location /proxyCustomerApi-pro {
  3.             # 解决跨域
  4.             add_header 'Access-Control-Allow-Origin' '*' always;
  5.             add_header 'Access-Control-Allow-Credentials' 'true' always;
  6.             add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
  7.             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;
  8.             # 设置 options 请求处理
  9.             if ($request_method = 'OPTIONS') {
  10.                 add_header 'Access-Control-Allow-Origin' '*' always;
  11.                 add_header 'Access-Control-Max-Age' 1728000 always;
  12.                 add_header 'Content-Type' 'text/plain; charset=utf-8' always;
  13.                 add_header 'Content-Length' 0 always;
  14.                 # 对于Options方式的请求返回200或其它码，表示接受跨域请求
  15.                 return 200;
  16.             }
  17.             # 设置反向代理 http://://xxx.xx.xx.xx:27005不加/会拼上/proxyCustomerApi-pro 加/不会拼/proxyCustomerApi-pro 由于真实接口请求中没有/proxyCustomerApi-pro这段 这里不需要拼上 代理服务地址后应添加/   http://xxx.xx.xx.xx:27005/
  18.             proxy_pass http://://xxx.xx.xx.xx:27005/; # 后端API地址 引起跨域报错的api请求地址
  19.             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  20.             proxy_set_header Host $http_host;
  21.             proxy_set_header X-NginX-Proxy true;
  22.             proxy_http_version 1.1;
  23.             proxy_connect_timeout 600;
  24.             proxy_read_timeout 600;
  25.             proxy_send_timeout 600;
  26.             proxy_buffer_size 64k;
  27.             proxy_buffers 4 64k;
  28.             proxy_busy_buffers_size 128k;
  29.             proxy_temp_file_write_size 128k;
  30.             # 缓存时间，单位秒。这里设置的是6小时
  31.             expires 21600s;
  32.             # 收到304响应后，再次请求的时间间隔
  33.             proxy_cache_valid 200 304 12h;
  34.         }
复制代码
9.配置后的nginx.conf完备内容如下：
  1. # For more information on configuration, see:
  2. #   * Official English Documentation: http://nginx.org/en/docs/
  3. #   * Official Russian Documentation: http://nginx.org/ru/docs/
  5. user nginx;
  6. worker_processes auto;
  7. error_log /var/log/nginx/error.log;
  8. pid /run/nginx.pid;
  11. # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
  12. include /usr/share/nginx/modules/*.conf;
  14. events {
  15.     worker_connections 1024;
  16. }
  18. http {
  19.     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
  20.                       '$status $body_bytes_sent "$http_referer" '
  21.                       '"$http_user_agent" "$http_x_forwarded_for"';
  23.     access_log  /var/log/nginx/access.log  main;
  25.     sendfile            on;
  26.     tcp_nopush          on;
  27.     tcp_nodelay         on;
  28.     keepalive_timeout   65;
  29.     types_hash_max_size 4096;
  30.     client_max_body_size 20M;
  32.     include             /etc/nginx/mime.types;
  33.     default_type        application/octet-stream;
  35.     # Load modular configuration files from the /etc/nginx/conf.d directory.
  36.     # See http://nginx.org/en/docs/ngx_core_module.html#include
  37.     # for more information.
  38.     include /etc/nginx/conf.d/*.conf;
  40.                 map $http_upgrade $connection_upgrade {
  41.                 default upgrade;
  42.                 '' close;
  43.                 }
  45.   # 加载vue前端项目的server
  46.   server {
  47.         listen       3004; # 端口
  48.         server_name  localhost; # 域名
  49.         location / {
  50.             root  /home/view/wallet/dist/; # 打包vue项目后的dist存放路径
  51.             index  index.html index.htm; # 加载入口html文件
  52.             try_files  $uri  $uri/  /index.html;
  53.         }
  54.         # /proxyCustomerApi-pro为前端 .env.production中的指定的值
  55.         location /proxyCustomerApi-pro {
  56.             # 解决跨域
  57.             add_header 'Access-Control-Allow-Origin' '*' always;
  58.             add_header 'Access-Control-Allow-Credentials' 'true' always;
  59.             add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
  60.             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;
  61.             # 设置 options 请求处理
  62.             if ($request_method = 'OPTIONS') {
  63.                 add_header 'Access-Control-Allow-Origin' '*' always;
  64.                 add_header 'Access-Control-Max-Age' 1728000 always;
  65.                 add_header 'Content-Type' 'text/plain; charset=utf-8' always;
  66.                 add_header 'Content-Length' 0 always;
  67.                 # 对于Options方式的请求返回200或其它码，表示接受跨域请求
  68.                 return 200;
  69.             }
  70.             # 设置反向代理 http://://xxx.xx.xx.xx:27005不加/会拼上/proxyCustomerApi-pro 加/不会拼/proxyCustomerApi-pro 由于真实接口请求中没有/proxyCustomerApi-pro这段 这里不需要拼上 代理服务地址后应添加/   http://xxx.xx.xx.xx:27005/
  71.             proxy_pass http://://xxx.xx.xx.xx:27005/; # 后端API地址 引起跨域报错的api请求地址
  72.             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  73.             proxy_set_header Host $http_host;
  74.             proxy_set_header X-NginX-Proxy true;
  75.             proxy_http_version 1.1;
  76.             proxy_connect_timeout 600;
  77.             proxy_read_timeout 600;
  78.             proxy_send_timeout 600;
  79.             proxy_buffer_size 64k;
  80.             proxy_buffers 4 64k;
  81.             proxy_busy_buffers_size 128k;
  82.             proxy_temp_file_write_size 128k;
  83.             # 缓存时间，单位秒。这里设置的是6小时
  84.             expires 21600s;
  85.             # 收到304响应后，再次请求的时间间隔
  86.             proxy_cache_valid 200 304 12h;
  87.         }
  88.         error_page   500 502 503 504  /50x.html;
  89.         location = /50x.html {
  90.             root   html;
  91.         }
  92.     }
  93.    
  95. # Settings for a TLS enabled server.
  96. #
  97. #    server {
  98. #        listen       443 ssl http2;
  99. #        listen       [::]:443 ssl http2;
  100. #        server_name  _;
  101. #        root         /usr/share/nginx/html;
  102. #
  103. #        ssl_certificate "/etc/pki/nginx/server.crt";
  104. #        ssl_certificate_key "/etc/pki/nginx/private/server.key";
  105. #        ssl_session_cache shared:SSL:1m;
  106. #        ssl_session_timeout  10m;
  107. #        ssl_ciphers PROFILE=SYSTEM;
  108. #        ssl_prefer_server_ciphers on;
  109. #
  110. #        # Load configuration files for the default server block.
  111. #        include /etc/nginx/default.d/*.conf;
  112. #
  113. #        error_page 404 /404.html;
  114. #            location = /40x.html {
  115. #        }
  116. #
  117. #        error_page 500 502 503 504 /50x.html;
  118. #            location = /50x.html {
  119. #        }
  120. #    }
  122. }
复制代码
10.执行nginx下令【sudo service nginx reload】使配置见效，至此线上生产情况跨域配置完成。
调试线上跨域题目是否办理，前端项目执行：yarn run build打包线上版本生成dist文件夹并上传到服务器，刷新线上网址发现接口可以请求拿到数据了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

嚴華

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表