vue3和nodejs全栈开发遇到的cors跨域问题

最新推荐文章于 2025-07-19 17:55:59 发布

原创最新推荐文章于 2025-07-19 17:55:59 发布 · 988 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

在实际开发中，因前后端分离经常会遇到跨域的问题，跨域的原因简单说就是彼此的IP和端口有不同，导致无法访问，是浏览器的安全策略，比如封装成electron应用的话就不会有这个问题。

以下是我目前遇到的一些跨域报错和如何解决的情况。记录一下怕以后不好找。

解决方式一.后端配置cors

这个还是比较方便的，对于自己开发的项目，后端稍微配置下就可以解决问题了。

1.npm i cors//安装依赖

2.配置


const express = require('express')
const cors=require('cors')

const app = express()

二.前端代理

于文件vite.config.js配置

比如要访问别的IP的端口接口，会在访问到/apikoudai的时候自动替换为target。

使用代理的时候访问的接口地址显示会是你的服务器IP，

export default defineConfig({
  server: {
    proxy: {
      '/student_admins': {
        target: 'http://localhost:3001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/student_admins/, '')
      },
      '/apikoudai': {
        target: 'http://111.111.111.111:888',
        changeOrigin: true,
        rewrite: (path) => path.replace('/apikoudai', '')
      }
    }
  }

axios封装模块

需要改变baseurl

const koudaihttp = axios.create({
  baseURL: '/apikoudai',
  // baseURL: '111.111.111.111：888',
  timeout: 5000000
})

服务器配置

我用的是nginx，listen和servername根据你的网站实际设定

后边重定向配置是按照上边的例子来的，可以根据此修改。

    server {
        listen       我的端口;
        server_name  www.我的网站.com;

        location /apikoudai/ {
        proxy_pass http://111.111.111.111:888/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

这些都是我在这些日子中学习遇到的情况和对应的解决方案，对于nainx的配置修改和一些底层原理说的也没别人好，有不懂的原理可以搜下别人的资料，有更好的方法欢迎大家分享~

标签