彻底解决网站跨域问题

缺乏、安全感 2021-12-11 02:45 366阅读 0赞

# 1.环境准备 #

*  [源码地址][Link 1]

# 2.什么是网站跨域 #

> 在两个项目之间使用Ajax实现通讯，如果浏览器访问域名与Ajax访问地址或端口不一致情况下，浏览器会有安全机制，这个机制就是跨域问题，会无法获取到返回结果(实际已经请求过去了，只是拿不到返回值)

# 3.跨域问题演示![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNDYzOTk5_size_16_color_FFFFFF_t_70] #

这是浏览器安全问题，在安卓、ios端没有此问题。

# 4.彻底解决跨域问题方案 #

1.  使用jsonp解决网站跨域(不推荐因为只能支持get请求，发送时自动将所有请求全部转换成get)
2.  使用HttpClient内部转发(不推荐 因为效率低，会发送两个请求,安全，隐藏了真实的接口调用地址，保证域名和端口一致，类似于Nginx)
3.  使用设置响应头允许跨域(可以推荐 适合小公司快速解决问题，没有什么安全不安全之说，本来知道接口地址就能直接调用，跨域问题只是获取不到返回值，并没有发送不了请求)
4.  基于Nginx搭建企业级API接口网关(强烈推荐 因为保证域名和端口都一致。以项目区分，反向代理到真实的服务器)
5.  使用Zuul搭建微服务API接口网关(强烈推荐 微服务相关-底层走rpc远程调用不会出现跨域问题)

## 4.1 使用jsonp解决网站跨域 ##

### 4.1.1 js代码 ###

### 4.1.2 后端代码 ###

@RequestMapping(value = "/getInfo", method = RequestMethod.GET)
    public void getInfo(HttpServletResponse response, String jsonpCallback) throws IOException {
    	JSONObject root = new JSONObject();
    	root.put("errorCode", "200");
    	root.put("errorMsg", "登陆成功");
    	response.setHeader("Content-type", "text/html;charset=UTF-8");
    	PrintWriter writer = response.getWriter();
    	writer.print(jsonpCallback + "(" + root.toString() + ")");
    	writer.close();
    }

## 4.2 使用HttpClient内部转发 ##

A项目中开放一个接口供给前端调用

### 4.2.1 前端代码 ###

### 4.2.2 后端代码 ###

*  web1

@RequestMapping("/forWardB")
    @ResponseBody
    public JSONObject forWardB() {
    	JSONObject result = HttpClientUtils.httpGet("http://127.0.0.1:8081/getInfo");
    	return result;
    }

*  web2

@RequestMapping("/getInfo")
    public Map<String, Object> getInfo(HttpServletResponse response) {
    	Map<String, Object> result = new HashMap<String, Object>();
    	result.put("errorCode", "200");
    	result.put("errorMsg", "登陆成功");
    	return result;
    }

## 4.3 使用设置响应头允许跨域 ##

### 4.3.1 前端代码 ###

不变

### 4.3.2 后端代码 ###

@RequestMapping("/getInfo")
    public Map<String, Object> getInfo(HttpServletResponse response) {
        //告诉客户端（浏览器 ）允许跨域访问 *表示所有域名都是可以 在公司中正常的代码应该放入在过滤器中
    	response.setHeader("Access-Control-Allow-Origin", "*");
    	Map<String, Object> result = new HashMap<String, Object>();
    	result.put("errorCode", "200");
    	result.put("errorMsg", "登陆成功");
    	return result;
    }

## 4.4 基于Nginx搭建企业级API接口网关 ##

### 4.4.1 Nginx相关配置 ###

server {
        listen       80;
        server_name  127.0.0.1;
    
    	###A项目
        location /a {
            proxy_pass   http://127.0.0.1:8080/;
            index  index.html index.htm;
        }
    	###B项目
    	 location /b {
            proxy_pass   http://127.0.0.1:8081/;
            index  index.html index.htm;
        }
    }

### 4.4.1 效果演示 ###

![在这里插入图片描述][20190712102756731.gif]

## 4.5 zuul网关 ##

*  略(参考微服务路由章节)

[Link 1]: https://gitee.com/itmyx/cross-domain
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNDYzOTk5_size_16_color_FFFFFF_t_70]: /images/20211210/aa373937c0d54a7f84f8ee185dfe44bf.png
[20190712102756731.gif]: /images/20211210/f570e5425eb44a39b602434e51d6045d.png