Wix 表单 CORS 问题

Question

我正在尝试使用 Wix 表单提交服务呼叫请求。该请求在 Postman 上完美运行，但在使用 Wix Forms 时失败，显示 CORS 策略错误。

后端代码（backend/formHandler.jsw）：

import { fetch } from 'wix-fetch';

export function submitServiceCallBackend(formData) {
const url = "https://80.81.34.29:9554/api/ServiceCalls/ServiceCallAdd";

    const headers = {
        "Content-Type": "application/json"
    };
    const body = JSON.stringify(formData);
    
    return fetch(url, {
        method: 'POST',
        headers: headers,
        body: body
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .catch(error => {
        console.error('Error:', error);
        throw error;
    });

}

前端代码：

import { submitServiceCallBackend } from 'backend/formHandler';

$w.onReady(function () { $w('#submitButton').onClick(() => { const formData = { Token: "TestServiceCall", LicTradNum: $w('#license').value, Subject: $w('#subject').value, Description: $w('#description').value, ContactPersonEmail: $w('#email').value, ContactPersonName: $w('#name').value, ContactPersonPhone: $w('#phone').value };
submitServiceCallBackend(formData)
        .then(response => {
            console.log('Success:', response);
        })
        .catch(error => {
            console.error('Error:', error);
        });
});
});

错误信息：

控制台：

访问'https://editor.wix.com/html/editor/web/renderer/render/document/9723edf9-4a0c-4251-828a-bd598d31a532/_api/wix-forms/v1/submit-form'来自来源“https://b46f501b-56da-4e23-aeb9-a02a6b083b93.dev.wix-code.com”已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：“Access-Control-” “Allow-Origin”标头的值“http://editor.wix.com”不等于提供的来源。让服务器发送带有有效值的标头，或者，如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

Wix 控制台：

网络响应不好禁止

我尝试过的：

• API 请求在 Postman 上运行良好。
• 由于 CORS 政策问题，使用 Wix Forms 时出现错误。 问题： 如何解决此 CORS 政策问题并使用 Wix Forms 成功提交表单数据？任何帮助或指示将不胜感激。

Answer 1

CORS 策略是浏览器实现的一项安全功能，用于防止不同来源的资源受到未经授权的访问。这就是为什么你不会在 Postman 中遇到 CORS 错误。

浏览器发送 POST 请求之前，会发出预检（OPTIONS）请求。此请求必须由服务器处理，并且响应必须包含

Access-Control-Allow-Origin

标头。此标头还应包含在对实际 POST 请求的响应中。您可以在线阅读有关此标题的更多信息。

作为一个简单的解决方法，您可以将服务器配置为发送带有通配符值 (*) 的

Access-Control-Allow-Origin

 标头，这允许来自任何来源的请求（尽管不推荐，因为它违背了 CORS 策略的目的）。

根据您用来构建服务器的技术堆栈，会有许多库可以帮助您处理 CORS 并设置适当的标头。