跨域的解决方案

概念

一、什么是跨域问题

前端调用的后端接口不属于同一个域（域名或端口不同），就会产生跨域问题，也就是说你的应用访问了该应用域名或端口之外的域名或端口。

通俗的说：当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

二、为什么会发生跨域问题

出于浏览器的同源策略限制。

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

三、跨域解决方案

1、JSONP

• 实现原理JSONP请求的类型是JavaScript脚本（callback 作为前后端的约定，callback的值做为方法名，json内容作为方法的参数），而XHR请求的类型是json类型。

• JSONP 的缺点

  1、只支持 GET 方法请求，不管 AJAX 中实际的请求方法是不是 GET

  2、服务端还需要修改代码

  3、发送的不是 XHR 请求，无法使用 XHR 对象（但这也是为什么可以解决跨域问题的根本）

  总之，并不推荐使用 JSONP 方式来解决跨域问题。

2、添加响应头

​ 在controller方法中，写响应头信息。

​ response.addHeader(“Access-Control-Allow-Origin”,“http://127.0.0.1:8082”);

3、Spring注解@CrossOrigin

在controller方法上添加注解

@CrossOrigin(origins = {“http://127.0.0.1:8082”})

4、配置文件（常用）

package com.linjiu.demo.config;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class HttpFilter implements Filter {
    /**
     *
     CROS跨域常用header
     Access-Control-Allow-Origin: 允许哪些ip或域名可以跨域访问
     Access-Control-Max-Age: 表示在多少秒之内不需要重复校验该请求的跨域访问权限
     Access-Control-Allow-Methods: 表示允许跨域请求的HTTP方法，如：GET,POST,PUT,DELETE
     Access-Control-Allow-Headers: 表示访问请求中允许携带哪些Header信息，如：Accept、Accept-Language、Content-Language、Content-Type
     */
    @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("Success");
            return;
        }
        chain.doFilter(request, response);
    }
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    @Override
    public void destroy() {
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

5、nginx跨域

一般解决的是前端静态页面在不同服务器之间的访问。

# 在server下添加配置文件
 #允许跨域请求的域，* 代表所有
 add_header 'Access-Control-Allow-Origin' *;
 #允许带上cookie请求
 add_header 'Access-Control-Allow-Credentials' 'true';
 #允许请求的方法，比如 GET/POST/PUT/DELETE
 add_header 'Access-Control-Allow-Methods' *;
 #允许请求的header
 add_header 'Access-Control-Allow-Headers' *;
1
2
3
4
5
6
7
8
9