当前位置: article > 正文

五中常见的跨域问题以及处理方案_alert('fail')报错

作者：weixin_40725706 | 2024-05-23 02:17:11

踩

alert('fail')报错

什么是网站跨域

跨域原因产生：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名，即浏览器安全策略问题。

网站跨域报错案例

jquery-1.7.2.min.js?t=2020-09-07:4 Failed to load http://b.mytest.com:8081/ajaxB: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://a.mytest.com:8080' is therefore not allowed access.

五种网站跨域解决方案

使用jsonp解决网站跨域
使用HttpClient内部转发
使用设置响应头允许跨域
基于Nginx搭建企业级API接口网关
使用Zuul搭建微服务API接口网关

跨域项目环境搭建

使用JSONP解决网站跨域

前端代码

src="http://www.mytest.com/static/common/jquery-1.7.2.min.js?t=2020-09-07"></script>

$(document).ready(function() {

$.ajax({

type : "GET",

async : false,

url : "http://b.mytest.com:8081/ajaxB",

dataType : "jsonp",

jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数

success : function(data) {

alert(data["errorCode"]);

error : function() {

alert('fail');

}

});

</script>

后端代码

@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();

writer.print(jsonpCallback + "(" + root.toString() + ")");

writer.close();

}

缺点：不支持post请求，代码书写比较复杂

使用设置响应头允许跨域

前端代码

src="http://www.mytest.com/static/common/jquery-1.7.2.min.js?t=2020-09-07"></script>

$(document).ready(function() {

$.ajax({

type : "GET",

async : false,

url : "http://b.mytest.com:8081/ajaxB",

dataType : "json",

success : function(data) {

alert(data["errorCode"]);

error : function() {

alert('fail');

}

});

</script>

后端代码

@RequestMapping("/ajaxB")

public Map<String, Object> ajaxB(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;

}

response.setHeader("Access-Control-Allow-Origin", "*"); 设置响应头允许跨域

如果在实际项目中，该代码建议放在过滤器中。

使用HttpClient进行内部转发

前端代码

src="http://www.mytest.com/static/common/jquery-1.7.2.min.js?t=2020-09-07"></script>

$(document).ready(function() {

$.ajax({

type : "POST",

async : false,

url : "http://a.mytest.com:8080/forwardB",

dataType : "json",

success : function(data) {

alert(data["errorCode"]);

error : function() {

alert('fail');

}

});

</script>

后端代码

A项目进行转发到B项目

@RequestMapping("/forwardB")

@ResponseBody

public JSONObject forwardB() {

JSONObject result = HttpClientUtils.httpGet("http://b.mytest.com:8081/ajaxB");

System.out.println("result:" + result);

return result;

}

B项目代码

@RequestMapping("/ajaxB")

public Map<String, Object> ajaxB(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;

}

缺点：多次请求！

搭建企业级API接口网关

使用Nginx搭建API接口网关

Nginx相关配置

server {

listen 80;

server_name www.mytest.com;

###A项目

location /a {

proxy_pass http://a.mytest.com:8080/;

index index.html index.htm;

}

###B项目

location /b {

proxy_pass http://b.mytest.com:8081/;

index index.html index.htm;

}

前端代码

src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

$(document).ready(function() {

$.ajax({

type : "POST",

async : false,

url : "http://www.mytest.com/b/ajaxB",

dataType : "json",

success : function(data) {

alert(data["errorCode"]);

error : function() {

alert('fail');

}

});

</script>

后端代码

@RequestMapping("/ajaxB")

public Map<String, Object> ajaxB(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;

}

SpringCloud搭建API接口网关

使用SpringCloud Zuul搭建API接口网关

Maven初始化依赖参数

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-parent</artifactId>

<version>2.0.0.RELEASE</version>

</parent>

<groupId>org.projectlombok</groupId>

<artifactId>lombok</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-tomcat</artifactId>

</dependency>

<groupId>org.apache.tomcat.embed</groupId>

<artifactId>tomcat-embed-jasper</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-log4j</artifactId>

<version>1.3.8.RELEASE</version>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-aop</artifactId>

</dependency>

<groupId>org.apache.httpcomponents</groupId>

<artifactId>httpclient</artifactId>

</dependency>

<groupId>com.alibaba</groupId>

<artifactId>fastjson</artifactId>

</dependency>

</dependencies>

application.yml

server:

port: 8080

spring:

mvc:

view:

prefix: /WEB-INF/jsp/

suffix: .jsp

HttpClientUtils工具类

public class HttpClientUtils {

private static Logger logger = LoggerFactory.getLogger(HttpClientUtils.class); // 日志记录

private static RequestConfig requestConfig = null;

static {

// 设置请求和传输超时时间

requestConfig = RequestConfig.custom().setSocketTimeout(2000).setConnectTimeout(2000).build();

}

/**

* post请求传输json参数

* @param url

* url地址

* @param json

* 参数

* @return

public static JSONObject httpPost(String url, JSONObject jsonParam) {

// post请求返回结果

CloseableHttpClient httpClient = HttpClients.createDefault();

JSONObject jsonResult = null;

HttpPost httpPost = new HttpPost(url);

// 设置请求和传输超时时间

httpPost.setConfig(requestConfig);

try {

if (null != jsonParam) {

// 解决中文乱码问题

StringEntity entity = new StringEntity(jsonParam.toString(), "utf-8");

entity.setContentEncoding("UTF-8");

entity.setContentType("application/json");

httpPost.setEntity(entity);

}

CloseableHttpResponse result = httpClient.execute(httpPost);

// 请求发送成功，并得到响应

if (result.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {

String str = "";

try {

// 读取服务器返回过来的json字符串数据

str = EntityUtils.toString(result.getEntity(), "utf-8");

// 把json字符串转换成json对象

jsonResult = JSONObject.parseObject(str);

} catch (Exception e) {

logger.error("post请求提交失败:" + url, e);

}

} catch (IOException e) {

logger.error("post请求提交失败:" + url, e);

} finally {

httpPost.releaseConnection();

}

return jsonResult;

}

/**

* post请求传输String参数例如：name=Jack&sex=1&type=2

* Content-type:application/x-www-form-urlencoded

* @param url

* url地址

* @param strParam

* 参数

* @return

public static JSONObject httpPost(String url, String strParam) {

// post请求返回结果

CloseableHttpClient httpClient = HttpClients.createDefault();

JSONObject jsonResult = null;

HttpPost httpPost = new HttpPost(url);

httpPost.setConfig(requestConfig);

try {

if (null != strParam) {

// 解决中文乱码问题

StringEntity entity = new StringEntity(strParam, "utf-8");

entity.setContentEncoding("UTF-8");

entity.setContentType("application/x-www-form-urlencoded");

httpPost.setEntity(entity);

}

CloseableHttpResponse result = httpClient.execute(httpPost);

// 请求发送成功，并得到响应

if (result.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {

String str = "";

try {

// 读取服务器返回过来的json字符串数据

str = EntityUtils.toString(result.getEntity(), "utf-8");

// 把json字符串转换成json对象

jsonResult = JSONObject.parseObject(str);

} catch (Exception e) {

logger.error("post请求提交失败:" + url, e);

}

} catch (IOException e) {

logger.error("post请求提交失败:" + url, e);

} finally {

httpPost.releaseConnection();

}

return jsonResult;

}

/**

* 发送get请求

* @param url

* 路径

* @return

public static JSONObject httpGet(String url) {

// get请求返回结果

JSONObject jsonResult = null;

CloseableHttpClient client = HttpClients.createDefault();

// 发送get请求

HttpGet request = new HttpGet(url);

request.setConfig(requestConfig);

try {

CloseableHttpResponse response = client.execute(request);

// 请求发送成功，并得到响应

if (response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {

// 读取服务器返回过来的json字符串数据

HttpEntity entity = response.getEntity();

String strResult = EntityUtils.toString(entity, "utf-8");

// 把json字符串转换成json对象

jsonResult = JSONObject.parseObject(strResult);

} else {

logger.error("get请求提交失败:" + url);

}

} catch (IOException e) {

logger.error("get请求提交失败:" + url, e);

} finally {

request.releaseConnection();

}

return jsonResult;

}

Jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

$(document).ready(function() {

$.ajax({

type : "POST",

async : false,

url : "http://www.mytest.com/b/ajaxB",

dataType : "json",

success : function(data) {

alert(data["errorCode"]);

error : function() {

alert('fail');

}

});

</script>

</head>

<body>显示 ....

</body>

</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/610909