cli4手脚架vue跨域问题完美解决_vue教授架4解决跨域问题-优快云博客

本文介绍了三种解决Vue.js项目中跨域问题的方法：通过服务器端设置响应头、使用vue.config.js配置代理服务器，以及创建代理服务器实现代理请求。每种方法都有其局限性，可能需要结合实际情况调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决经历的过程

1.在服务器端设置响应头

似乎不是很完美，有时候也会请求失败

		//解决vue跨域问题
        resp.addHeader("Access-Control-Allow-Origin","*");
        resp.addHeader("Access-Control-Allow-Method","POST,GET");

2.手脚架添加配置文件`vue.config.js`

似乎也不是很完美，有时也会请求失败

module.exports = {
    devServer: {
        port: 8080, // 源地址端口，自行修改
        proxy: {
            '/api': {
                target: 'http://localhost:8080',  // 跨域目标主机，自行修改
                ws: true,  // 代理 websockets
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''  // 重写地址
                }
            },
        }
    }
};

3.代理服务器`推荐`

在方法2的基础上配置自己的服务器地址+端口
在自己的服务器实现代理请求
请求转发响应得到的结果

`简单Java servlet 实现`

创建servlet
vue配置文件vue.config.js,填写自己的服务器地址
vue发送get请求，请求servlet
servlet中使用String body = HttpRequest.get("http://c.m.163.com/nc/auto/list/6YOR5bee/0-20.html").body();获取响应数据（自行进行自己的判断），servlet使用Gson + write打包数据并返回。writer.println(gson.toJson(new RespPak(1,body)));