vue和servlet跨域问题解决办法

什么是跨域

当一个请求url的 协议（protocol），主机（host）和端口号（port）无论哪个发生改变都称之为跨域

为什么会出现跨域问题

最根本的原因是：出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

同源策略

同源策略由Netscape提出的一个著名的安全策略。
现在所有可以支持JavaScript的浏览器都会使用这一策略。

同源
同源即 同协议，端口，域名

同源策略的限制 不能获取不同源的cookie，LocalStorage 和 indexDB不能获取非同源的DOM不能发送非同源的ajax请求。（准确说应该是可以向非同源的服务器发起请求，但是返回的数据会被浏览器拦截） 同源策略由浏览器执行
所有的限制都是因为浏览器的作用，这是因为浏览器为保护用户隐私而才去的措施。

为什么要有同源策略

采用同源策略主要是因为安全。若非同源下的cookie等隐私数据可以被随意获取，非同源下的DOM可以的随意操作，ajax可以任意请求的话，用户的各种隐私势必泄露。

再来细说一下同源策略的限制 不能获取不同源的cookie，LocalStorage 和 indexDB 这个东西很好理解，是为了防止恶意网站获取用户其他网站的cookie数据 不能让获取非同源的DOM 如果没有这一条，恶意网站可以通过iframe打开银行页面，可以获取dom就相当于可以获取整个银行页面的信息。 不能发送非同源的ajax请求。
看个大佬写的小案例 链接

servlet+vue如何解决跨域问题

解决办法：后端代码service方法中添加如下代码

 req.setCharacterEncoding("UTF-8"); // 处理post乱码
        resp.setContentType("application/json; charset=utf-8"); // 响应内容的类型
        //        设置响应头允许ajax跨域访问
        resp.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有的ip的可以访问
        resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); // 允许访问的方式
        resp.setHeader("Access-Control-Max-Age", "3600");  // 设置超时时间
        resp.setHeader("Access-Control-Allow-Headers", "token, Accept, Origin, X-Requested-With, Content-Type, Last-Modified");

做完上面的操作之后，在vue中找到vue.config.js

进入文件中添加如下代码

 // 解决跨域问题
  // 关闭语法检查
  lintOnSave:false,
  devServer: {
    proxy: {
      '/api': {
        //后端接口的baseurl
        target: ' http://localhost/servlet_demo4_war_exploded/',
        //是否允许跨域
        changeOrigin: true,
        pathRewrite: {
          //这里的作用是使用去掉api
          '^/api': ''
        }
      }
    }
  }

添加完成如下图所示：