1.使用jsonp解决网站跨域
2.使用HttpClient内部转发
3.使用设置响应头允许跨域
4.基于Nginx搭建企业级API接口网关
5.使用Zuul搭建微服务API接口网关(暂不说明)
一、使用JSONP
缺点:不支持post请求,代码书写比较复杂
ajax 改为jsonp
dataType : "jsonp"
jsonp : "jsonpCallback"
type : "GET"
如下:
后台代码
jsonpCallback 为jsonp生成的参数
@RequestMapping(value = "/ajaxB", method = RequestMethod.GET)
public void ajaxB(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();
//需要把jsonp生成的参数带回前台,jsonp才能解析
writer.print(jsonpCallback + "(" + root.toString() + ")");
writer.close();
}
二、设置Header响应头
设置响应头允许跨域 ( * 表示所有请求允许跨域)
response.setHeader(“Access-Control-Allow-Origin”, “*”);
建议放在过滤器
@RequestMapping("/ajaxB")
public MapajaxB(HttpServletResponse response) {
//设置响应头
response.setHeader("Access-Control-Allow-Origin", "*");
Mapresult = new HashMap();
result.put("errorCode", "200");
result.put("errorMsg", "登陆成功");
return result;
}
三、HttpClient 转发
HttpClient 请求具体逻辑,maven依赖可看:
https://blog.csdn.net/qq_41463655/article/details/89637160
A项目进行转发到B项目(A项目等于前台项目要访问的服务器)
@RequestMapping("/forwardB")
@ResponseBody
public JSONObject forwardB() {
JSONObject result = HttpClientUtils.httpGet("http://b.itmayiedu.com:8081/ajaxB");
System.out.println("result:" + result);
return result;
}
B项目(B项目等于执行具体业务逻辑代码的服务器)
@RequestMapping("/ajaxB")
public MapajaxB(HttpServletResponse response) {
response.setHeader("Access-Control-Allow-Origin", "*");
Mapresult = new HashMap();
result.put("errorCode", "200");
result.put("errorMsg", "登陆成功");
return result;
}
四、Nginx搭建API接口网关
访问 www.baidu.com/a 走A 项目同 http://a.baidu.com:8080/
访问 www.baidu.com/b 走B 项目同 http://b.baidu.com:8081/
两个项目都在同一个域名下 www.baidu.com,不会存在跨域问题
server {
listen 80;
server_name www.baidu.com;
###A项目
location /a {
proxy_pass http://a.baidu.com:8080/;
index index.html index.htm;
}
###B项目
location /b {
proxy_pass http://b.baidu.com:8081/;
index index.html index.htm;
}
}