Vue调试时跨域问题解决

  1. 通过前端proxyTable处理,经试验,添加后,后端可以不用额外处理
proxyTable: {
      //可以设置多个,对应到不同的后端服务,通过调用时增加前缀选用不通代理
      '/api': {
        // 测试环境
        target: 'http://127.0.0.1:8080/',  // 接口域名,也就是要代理到的后端服务
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/api': ''   //需要rewrite重写的, 如果前缀是额外增加的,需要重写去掉
        }
      }
}
  1. 后端拦截器/过滤器处理(JAVA)
String curOrigin = request.getHeader("Origin");

response.addHeader("Access-Control-Allow-Origin", curOrigin);

response.addHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie, Authorization");

 // 跨域会首先发送一次OPTIONS请求,放过
if("OPTIONS".equals(request.getMethod()))
{
   return false;
}

3.通过nginx转发

location /api {
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' $http_access_control_request_headers;
        add_header 'Access-Control-Allow-Methods' *;

        proxy_pass http://your ip:8888/api;
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.内存泄露 内存泄漏两种情况: 在堆中申请的空间没有被释放(虚拟机gc可以解决) 对象已不在使用,但仍然在内存中...
    Aimerwhy阅读 3,788评论 0 0
  • IOC 控制反转容器控制程序对象之间的关系,而不是传统实现中,有程序代码之间控制,又名依赖注入。All 类的创建,...
    irckwk1阅读 4,624评论 0 0
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 8,175评论 1 4
  • Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Axios的中文文...
    李亚_45be阅读 13,356评论 1 8
  • vue中axios不支持vue.use()方式声明使用。 所以有两种方法可以解决这点: 第一种: 在main.js...
    w_zhuan阅读 4,668评论 0 2

友情链接更多精彩内容