form 跨域请求 示例
时间: 2023-10-08 10:13:51 浏览: 159
以下是一个简单的 form 跨域请求的示例:
假设我们有两个网站,分别为 A 网站和 B 网站。我们想在 A 网站上通过表单提交数据到 B 网站的服务器上。
在 A 网站上的 HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>表单跨域请求示例</title>
</head>
<body>
<form id="myForm" action="http://www.b.com/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="提交">
</form>
<script>
// 在表单提交时,禁止默认的表单提交行为
document.getElementById("myForm").addEventListener("submit", function(event){
event.preventDefault();
});
// 在表单提交时,通过 AJAX 方式提交表单数据到 B 网站的服务器上
document.getElementById("myForm").addEventListener("submit", function(event){
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://www.b.com/submit");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function(){
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200){
alert(xhr.responseText);
}
};
var formData = new FormData(document.getElementById("myForm"));
xhr.send(formData);
});
</script>
</body>
</html>
```
在 B 网站的服务器上,可以通过接收表单数据并返回一个 JSON 格式的响应来测试该示例。例如,可以在 B 网站的服务器端代码中添加以下代码:
```
app.post('/submit', function(req, res){
var username = req.body.username;
var password = req.body.password;
var result = {
"status": "success",
"message": "提交成功!",
"username": username,
"password": password
};
res.send(result);
});
```
注意:在真实的生产环境中,为了保证安全性,需要对表单数据进行验证和过滤,避免出现安全漏洞。
阅读全文