提交表单到别的域名

基础概念

提交表单到别的域名涉及到跨域请求（Cross-Origin Resource Sharing, CORS）。跨域请求是指从一个源（域）的网页去请求另一个源的资源。由于浏览器的同源策略（Same-Origin Policy），默认情况下，不同源之间的请求是被禁止的。

类型

简单请求：使用GET、POST、HEAD方法，且HTTP头信息不超出以下几种字段：Accept、Accept-Language、Content-Language、Content-Type（只限于application/x-www-form-urlencoded、multipart/form-data、text/plain）。
预检请求：对于复杂请求（如PUT、DELETE方法，或者Content-Type为application/json），浏览器会先发送一个OPTIONS请求进行预检，确认服务器是否允许该跨域请求。

应用场景

API调用：前端应用需要调用其他域的API来获取数据。
表单提交：用户在一个域的页面上填写表单，然后提交到另一个域的服务器进行处理。

常见问题及解决方法

问题：跨域请求被浏览器阻止

原因：浏览器的同源策略阻止了不同源之间的请求。

解决方法：

服务器端设置CORS头：服务器需要在响应头中添加Access-Control-Allow-Origin字段，允许特定的源进行跨域请求。例如：
服务器端设置CORS头：服务器需要在响应头中添加Access-Control-Allow-Origin字段，允许特定的源进行跨域请求。例如：
使用JSONP： JSONP（JSON with Padding）是一种解决跨域问题的老方法，但它只支持GET请求，并且安全性较低。
代理服务器：在同源的服务器上设置一个代理，前端将请求发送到同源的代理服务器，代理服务器再将请求转发到目标服务器。

示例代码

假设我们有一个前端页面在https://frontend.com，需要提交表单到https://backend.com。

前端代码：

<!DOCTYPE html>
<html>
<head>
    <title>Cross-Origin Form Submission</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" />
        <input type="password" name="password" />
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault();
            fetch('https://backend.com/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(new FormData(this))
            })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

后端代码（Node.js + Express）：

const express = require('express');
const app = express();

app.use(express.json());

app.post('/submit', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', 'https://frontend.com');
    res.json({ message: 'Form submitted successfully' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});