Vue3项目使用axios调用后端接口解决跨域且部署服务器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、代码举例

<template>
  <div style="margin-left: 10%; text-align: left">
    <div style="margin-top: 20px">
      <el-input
        v-model="IDNumber"
        style="width: 240px"
        placeholder="请输入身份证号"
      />
    </div>
    <div style="margin-top: 20px">
      <el-button @click="queryLadderControl()" type="primary" round
        >查询</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import axios from "axios";

const IDNumber = ref();
const queryLadderControl = async () => {
  try {
    const response = await axios.get(
      "dockingApi/xxxxxx/xxxxx?IDCard=" +
        IDNumber.value
    );
    // 假设接口返回的数据中有一个字段叫做 id
    const id = response.data.id;
    console.log("response=", response);
    // 跳转到指定页面，并且将数据作为参数传递
    // router.push({ path: "/target-page", query: { id } });
  } catch (error) {
    console.error("获取数据失败", error);
  }
};
</script>

二、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 发起跨域请求的问题。希望对你有所帮助！