解决vue跨域问题

环境搭建

1.服务端

服务端端口8081，服务端有资源"http://localhost:8081/hello"

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("- - - - 8081 /hello - - - -");
        response.getWriter().write("success");
    }

}

2.客户端

客户端端口8080，地址“http://localhost:8080”

App.vue

<template>
  <div>
    <h4>This is 8080</h4>
    <button @click="test">Click Me</button>
  </div>
</template>

<script>

  import $ from 'jquery'

  export default{
      methods:{
        test(){
           $.ajax({
              url:'http://localhost:8081/hello',
              type:'POST',
              success:function (res) {
                  alert(res);
              },
              error:function () {
                  alert("发生错误");
              }
          });
        }
      }
  }
</script>

<style>
</style>

3.运行

发送请求，ajax跨域请求失败

一、修改后端

服务端设置响应头response.setHeader("Access-Control-Allow-Origin", "*");

*代表可访问的地址，可以设置指定域名

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setHeader("Access-Control-Allow-Origin", "*");

        System.out.println("- - - - 8081 /hello - - - -");
        response.getWriter().write("success");
    }

}

结果：

二、修改前端

使用proxyTable设置接口代理（项目使用vue-cli脚手架搭建）

在config/index.js下设置

  proxyTable: {
      '/api':{ //匹配所有以'api'开头的请求路径
        target:'http://localhost:8081', //代理目标的基础路径
        changeOrigin:true,  //是否支持跨域
        pathRewrite:{ //重写路径：去掉路径中开头的'/api'
          '^/api':''
        }
      }
    }

App.vue

<template>
  <div>
    <h4>This is 8080</h4>
    <button @click="test">Click Me</button>
  </div>
</template>

<script>

  import $ from 'jquery'

  export default{
      methods:{
        test(){
           $.ajax({
              url:'/api/hello',
              type:'POST',
              success:function (res) {
                  alert(res);
              },
              error:function () {
                  alert("发生错误");
              }
          });
        }
      }
  }
</script>

<style>
</style>

结果：