跨域问题解决

后端解决方案

  • 设置Access-Control-Allow-Origin响应头来允许特定的前端域名访问资源

    Access-Control-Allow-Origin: https://your-frontend-domain.com

    如果需要在跨域请求中携带 Cookie(例如,用于用户身份验证),后端需要设置 Access-Control-Allow-Credentials 为 true,并且不能将 Access-Control-Allow-Origin 设置为 *。eg:
    Access-Control-Allow-Credentials: true

前端解决方案

  • 使用devserver配置代理

    module.exports = {
    devServer: {
    proxy: {
    '/api': { // 匹配所有到 /api 的请求
    target: 'http://aider.meizu.com', // 目标服务器的地址
    changeOrigin: true, // 是否改变请求头中的Origin字段
    pathRewrite: {
    '^/api': '' // 重写请求路径,去掉路径中的 /api
    }
    }
    }
    }
    };

  • 跨域浏览器(如果开发环境复杂,需要跨域浏览器辅助绕过跨域限制)

    1、可以先复制粘贴一个副本浏览器快捷键,再右键浏览器,点击属性
    2、找到快捷方式,找到目标,目标输入框内容最后面加上 --disable-web-security --user-data-dir=C:\ChromeDevSession
    3、点击确定
    4、重新打开浏览器即可

相关推荐
打小就很皮...13 小时前
实现可交互的泳道图组件(React)
前端·react.js·泳道图
optimistic_chen13 小时前
【Vue3 入门】掌握这些才能优雅上手
前端·javascript·vue.js·前端框架·visual studio code
JEECG低代码平台13 小时前
终端里的AI搭档:我用Claude Code提效的实战心得
前端·人工智能·chrome
HelloReader14 小时前
Flutter ChangeNotifier用 ViewModel 管理应用状态(九)
前端
用户40993225021214 小时前
Vue 3 静态与动态 Props 如何传递?TypeScript 类型约束有何必要?
前端·vue.js·后端
程序员库里14 小时前
TipTap简介
前端·javascript·面试
关中老四14 小时前
【js/web甘特图插件MZGantt】如何使用外部弹框添加和修改任务(updRows方法使用说明)
前端·javascript·甘特图·甘特图插件
nunumaymax14 小时前
css实现元素和文字从右向左排列
前端·css
yatum_201414 小时前
CentOS 7 集群 SSH 免密与主机名配置文档
linux·前端·网络