使用axios发送请求

1. 安装axios

npm install axios

发送请求,报了如下错误

跨域:

A域名 请求B域名:

http://localhost 发送ajax请求,请求http://localhost:8080

形成跨域:

1. 协议是否一样
2. 服务器的ip是否一样
3. 端口是否一样

上面三个只要有一个不一样, 形成跨域

浏览器默认禁止跨域请求

解决跨域:

1. 前端解决: 配置代理服务器

在vue.config.js文件中:

 //代理服务器解决跨域问题
  devServer: {
    //写的是后台服务器的协议+ip+端口
    proxy: {
      '/api': {
        target: 'http://localhost:8080', //url的重写: /api 替换为http://localhost:8080
        ws: false,
        changeOrigin: true, //支持跨域请求

      }
    } 
  }

发送的请求加 /api前缀

  this.$axios.get('/api/login2?user=zhangsan&password=123')
                .then(function (response) {
                    // 处理成功情况
                    console.log(response);
                })
                .catch(function (error) {
                    // 处理错误情况
                    console.log(error);
                })
        }

后台服务器:所有的请求加 /api前缀

2. 后台解决跨域

   在项目中配置一个处理跨域的过滤器

   package com.fs.user.filter;
   
   import javax.servlet.*;
   import javax.servlet.annotation.WebFilter;
   import javax.servlet.http.HttpServletResponse;
   import java.io.IOException;
   
   @WebFilter(filterName="contextfilter",urlPatterns="/*")
   public class CrossFilter implements Filter {
   
       public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
           HttpServletResponse response = (HttpServletResponse) res;
           response.setHeader("Access-Control-Allow-Origin", "*"); //允许所有的域名访问
           response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, PATCH, DELETE"); //允许的提交方式
           response.setHeader("Access-Control-Max-Age", "3600"); //最大有效时间
           response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type, Accept, Origin"); //允许那些请求头
           response.setHeader("Access-Control-Allow-Credentials", "true"); //是否支持ajax提交cookie
           chain.doFilter(req, res);
       }
   
       public void init(FilterConfig filterConfig) {}
   
       public void destroy() {}
   
   }
   

3. 使用nginx,其他的服务器处理跨域