13.JavaWeb-跨域问题

1.跨域

        跨域（Cross-Origin Resource Sharing，CORS）是指在浏览器中，当一个页面发起的请求的域名、协议或端口与该页面所在的域名、协议或端口不一致时，就会出现跨域问题。浏览器为了保障安全性，会限制跨域请求，防止恶意的网站进行数据窃取或篡改。

        在前后端分离的架构中，前端通常运行在一个独立的域名或端口上，而后端提供接口的域名或端口可能与前端不同。这种情况下，由于存在不同域名、不同端口或不同协议，跨域问题就会出现。

2.Springboot解决跨域方案

        三种方法都应该在前端获取用完整url

mounted: function(){
    console.log(this.cid);
    this.$axios.get("http://localhost:9090/goods/info/"+this.cid+"/1/12").then(res=>{
        console.log(res.data);
    })
}

2.1 方案一：直接采用SpringBoot的注解@CrossOrigin

        Controller层在需要跨域的类或者方法上加上该注解即可。

@Controller
@RequestMapping("/address")
public class AddressController {
    @Autowired
    private AddressService addressService;
    
    @CrossOrigin
    @RequestMapping("/all")
    @ResponseBody
    public List<Address> all(){
        return addressService.list();
    }
}

2.2 方案二：自定义过滤器

@Component
public class CrossOriginFilter implements Filter{
​
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
        if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
            response.getWriter().println("ok");
            return;
        }
        chain.doFilter(request, response);
    }
}

响应头	作用
Access-Control-Allow-Credentials	为true，跨域请求时在请求头中挟带凭据信息，否则不挟带。凭据信息包括cookie、http认证、客户端ssl……，常用cookie为凭据。
Access-Control-Allow-Origin	允许来自哪些域的跨域请求可以访问
Access-Control-Allow-Methods	允许请求的方式
Access-Control-Allow-Headers	用于预检请求中，列出了将会在正式请求的 Access-Control-Request-Headers 字段中出现的首部信息。

2.3 方案三：编写跨域配置类，实现WebMvcConfigurer接口

@Configuration
public class CrossOriginConfiguration implements WebMvcConfigurer{
    static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
            .addMapping("/**")
            .allowedOrigins("*")
            .allowCredentials(true)
            .allowedMethods(ORIGINS)
            .maxAge(3600);
    }
}

3.前端解决跨域问题

        修改config中的index.js文件中proxyTable

    proxyTable: {
      // 路径前缀
      '/api': {
        // 接口的域名
        target: 'http://localhost:8600',
        // 如果接口跨域，需要进行这个参数配置，为true的话，请求的header将会设置为匹配目标服务器的规则（Access-Control-Allow-Origin）
        changeorigin: true,
        pathRewrite: {
          //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
          '^/api': ''
        }
      }
    },