0

问题描述

接手一个别人的项目,使用的是vue3
在根目录下的 vue/config.js配置服务器代理

    // vue/config.js
    // webpack-dev-server 相关配置
    devServer: {
        open: true,
        // host: "0.0.0.0",
        port: 8080,
        // contentBase: path.resolve(__dirname, "public"),
        https: false,
        hotOnly: false,
        proxy: {
            "/api": {
                target: Url,  // 外部引入的url,连接的后端的服务器
                ws: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
        //before: app => {}
    },

然后在fetch.js 生成 axios实例,并且引用代理

fetch.js
import axios from 'axios'
// 创建 axios 实例
const service = axios.create({
    baseURL: '/api', // 这里使用配置过的代理
    timeout: 10000 
});

这种情况在开发模式里,可以连接后端
但是npm run build 打包生成dist文件后,连接服务器则显示跨域
如图:

clipboard.png


后来 我用以前的老方法 在fetch.js文件里设置baseUrl

// fetch.js
let Url = require("../../public/projectConfig").Url
// 创建 axios 实例
const service = axios.create({
    baseURL: Url,
    timeout: 10000 // 请求超时时间
});

这种情况是可以连接到后端服务器的,并且打完包后的dist文件也可以连接后端服务器
后端出了一些bug,虽然没有了跨域的问题,但是后端的安全框架无法识别登陆状态,好像需要proxyTable什么的

求知:为什么使用proxy代理打包后反而形成了跨域,而老老实实写baseUrl却没有问题。 后端为什么识别不出登录状态

2019-07-15 提问
2 个回答
1

已采纳

反向代理 是开发时可能需要的 打包到生产是不用反向代理的 必须去掉 不去掉请求地址发生变化不符合同源策略肯定跨域

0

本地代理是开发环境才会生效,打包为生产环境后会自动失效,也就是说上面的配置不需要去做调整,本身就是没问题的,之所以打包之后会出现跨域,是因为后台接口服务没有配置响应头的跨域机制,以java为例(response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization")),当然,如果后台服务本身设计就是为了安全不开放跨域访问,那可以将打包之后的前端代码放在nginx内,并设置反向代理到对应的接口服务即可

撰写答案

推广链接