java+javascript+ajax使用cors实现跨域 java+javascript使用cors解决跨域问题 请给一个完整的代码使用案例
时间: 2023-12-29 08:06:25 浏览: 94
【JavaScript源代码】Ajax解决跨域之设置CORS响应头实现跨域案例详解.docx
以下是一个完整的Java和JavaScript使用CORS解决跨域问题的代码示例:
Java后端代码(使用Spring Boot框架):
```java
@RestController
public class ApiController {
@GetMapping("/data")
public ResponseEntity<String> getData() {
// 处理请求逻辑
String responseData = "This is the response data";
return ResponseEntity.ok(responseData);
}
}
```
JavaScript前端代码:
```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Origin', 'http://example.com'); // 请求源
xhr.withCredentials = true; // 允许发送Cookie
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response); // 处理响应
}
};
xhr.send();
```
在上述示例中,Java后端使用Spring Boot框架创建了一个简单的RestController,其中包含一个处理GET请求的方法`getData()`。该方法返回一个字符串作为响应数据。
在JavaScript前端,使用XMLHttpRequest对象发送了一个GET请求到Java后端的`/data`路径。在请求头中设置了`Content-Type`和`Origin`字段,其中`Origin`字段指定了请求源。还设置了`withCredentials`属性为true,以允许发送Cookie。在接收到响应后,可以通过处理`xhr.responseText`来获取响应数据。
请确保将Java后端代码部署在localhost:8080上,并将JavaScript前端代码部署在一个不同的源(例如http://example.com)上以进行跨域请求。
这个示例演示了如何使用Java和JavaScript中的CORS来解决跨域问题。在实际应用中,你需要根据你的需求和框架进行适当的配置和处理。
阅读全文