阅读量:1
Vue3项目使用axios调用后端接口解决跨域且部署服务器nginx相关跨域配置
一、Vue中配置
在使用 Vue 3 中的 Axios 发起跨域请求时，你可能需要进行一些配置来解决跨域访问的问题。以下是一种解决方法：
在项目的根目录下新建一个
vue.config.js文件（如果没有的话）。在
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 的值替换为你实际的后端接口地址。
- 然后在 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 发起跨域请求的问题。希望对你有所帮助！
