Vue3项目使用axios调用后端接口解决跨域且部署服务器nginx相关跨域配置

• 一、Vue中配置
• • 1、代码举例
• 二、Nginx中配置

一、Vue中配置

在使用 Vue 3 中的 Axios 发起跨域请求时，你可能需要进行一些配置来解决跨域访问的问题。以下是一种解决方法：

1. 在项目的根目录下新建一个 vue.config.js 文件（如果没有的话）。

2. 在 vue.config.js 文件中添加如下内容：

module.exports = defineConfig({   transpileDependencies: true,   //解决跨域   devServer: {     // host: '127.0.0.1',  // 此前端项目的IP地址     // port: 8010,  // 此前端项目的端口号     // open: true,  //表示在启动开发服务器时，会自动打开浏览器并访问指定的地址     proxy: {       '/dockingApi': {         target: 'http://127.0.0.1:8888/', //接口域名         changeOrigin: true,       //是否跨域         pathRewrite: {           '^/dockingApi': ''  //假如我们的地址是 /dockingApi/member/getToken 会转化为 /member/getToken         }       }     }   } }) 

在上面的例子中，我们通过 devServer 的 proxy 配置来设置代理，将所有以 /api 开头的请求代理到后端接口地址，并且启用了跨域。请将 target 的值替换为你实际的后端接口地址。

3. 然后在 Axios 请求时，只需要写相对路径即可，如：

axios.get('/dockingApi/data')  // 实际请求会被代理到 http://127.0.0.1:8888/data 

1、代码举例

二、Nginx中配置

		location /dockingApi/ {           proxy_pass http://10.0.0.81:8888/;   # 后端服务器域名和端口(开发环境)           proxy_set_header Host $proxy_host;       }  

 #user  nobody; worker_processes  1;  #error_log  logs/error.log; #error_log  logs/error.log  notice; #error_log  logs/error.log  info;  #pid        logs/nginx.pid;   events {     worker_connections  1024; }   http {     include       mime.types;     default_type  application/octet-stream;          sendfile        on;      keepalive_timeout  65;       server {         listen       8010;         server_name  localhost;          location / {             root   dist;             index  index.html index.htm; 			try_files $uri $uri/ /index.html;         } 		 		# 对应代理其中10.0.0.81是后端对应地址 		location /dockingApi/ {           proxy_pass http://10.0.0.81:8888/;   # 后端服务器域名和端口(开发环境)           proxy_set_header Host $proxy_host;       }           error_page   500 502 503 504  /50x.html;         location = /50x.html {             root   html;         }       } }  

这样就可以解决 Vue 3 中使用 Axios 发起跨域请求的问题。希望对你有所帮助！