前端跨域问题

1761分钟2023-10-1918江苏南京0

文章摘要

本文介绍了前端解决跨域问题的方法：当后端未配置 CORS 时，可在 Vue 项目的 vue.config.js 中设置 devServer.proxy 代理，将 /api 请求转发至目标服务器，同时配合 pathRewrite 重写路径，并修改环境变量 VUE_APP_API_BASE_URL 为 /api 即可生效。

有的时候博客内容会有变动，首发博客是最新的，其他博客地址可能会未同步,认准https://blog.zysicyj.top

如果后端接口没有设置 cors (跨域资源共享)，可在前端解决跨域问题，在 vue.config.js 中配置代理：

  devServer: {
    client: {
        overlay: false
    }
,
    historyApiFallback:true,
        allowedHosts
:
    'all',
        port
:
    8080,
        proxy
:
    {
        '/api'
    :
        {
            // target:"http://172.29.133.140:8081/api",
            // target: 'http://127.0.0.1:8081',
            // target: 'http://172.40.236.81:8907',//网关 gqc
            target: 'http://172.29.133.135:8081/api',
                // target: 'http://172.29.133.137:8081/api',//陆强
                //target: 'http://172.29.132.54:8081/api',//吕世建
                // target: 'http://172.29.131.100:8081/api',//于勇
                //target: 'http://172.29.131.26:8081/api',//双双
                //  target:"http://172.29.131.26:8081",
                // target:"http://172.29.133.135:8080",
                pathRewrite
        :
            {
                '^/api'
            :
                ''
            }
        }
    }
}