javascript - XMLHttpRequest 无法加载。仅在 POST 调用且仅通过实际本地网站时无 Access-Control-Allow-Origin

Question

我看到很多关于此的请求，看了一点，没有看到我的特定问题，但我很可能错过了它。如果是这样，请道歉。

我正在制作一个调用服务堆栈服务的网站。该服务在服务器上发布并托管。

我之前在尝试对服务进行 GET 调用时遇到了此错误，并发现添加此

            base.SetConfig(new EndpointHostConfig
        {
            GlobalResponseHeaders = {
        { "Access-Control-Allow-Origin", "*" },
        { "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS" },
        { "Access-Control-Allow-Headers", "Content-Type" },
        },
        });

问题已解决。然而现在，当通过网站进行 ajax 调用时

$.ajax({
                    type: 'POST',
                    url: "https://pirates.com/SHIPSWS/shipDemo",
                    data: {
                        "Bow": $("#BowTypes").val(),
                        "BodyContent": CKEDITOR.instances.body.getData()
                    },
                    success: function (data) {
                        EmailBody = data;
                    }
                })

我遇到同样的错误

XMLHttpRequest cannot load https://pirates.com/SHIPSWS/shipDemo. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:58032' is therefore not allowed access. 

这让我很困惑，因为我设置了上述内容，并且之前通过 ajax 在网站中调用的 GET 语句非常有效。

更让我困惑的是，如果我使用 chrome 的 postman 插件来向服务发出实际的发布请求。它可以正常工作。

有人知道我做错了什么吗？

编辑#1

从本地网站调用时通过 Chrome 的 header 。

Request URL:https://pirates.com/SHIPSWS/shipDemo
Request Headers CAUTION: Provisional headers are shown.
Accept:*/*
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Origin:http://localhost:58032
Referer:http://localhost:58032/Default.aspx
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Form Dataview sourceview URL encoded
Bow:Front
BodyContent:<p>Yarrrrrrr Matey</p>

编辑 #2 工作在网站中获取调用

 $.ajax
            ({
                url: "https://pirates.com/SHIPSWS/shipDemo/ships/" + this.value + "?format=json",
                success: function (data) {
                    ShipList = data;
                         Emails = $("#EmailTable").dataTable({
                        "bDestroy": true,
                        "aaData": ShipList ,
                        "aoColumns": [
                            {
                                "sTitle": "Email Address",
                                "mData": "emailAddress"
                            },
                            {
                                "sTitle": "First Name",
                                "mData": "firstName"
                            },
                            {
                                "sTitle": "Last Name",
                                "mData": "lastName"
                            },
                            {
                                "sTitle": "Ship Number",
                                "mData": "shipNumber"
                            },
                            {
                                "sTitle": "Shipsize",
                                "mData": "shipsize"
                            },
                            {
                                "sTitle": "Select",
                                "mData": "emailAddress",
                                "mRender": function (data, type, full) {
                                    return '<input type="checkbox" class="check1" name="check1" value="' + data + '">';
                                },
                            }
                        ]
                    });

Answer 1

因此，在玩了一会儿之后，post 调用将发送

Yarrrrrrr Matey

作为其数据的一部分(BodyContent)。这是导致错误的原因。

我最终从这里的另一个问题中获取了这个函数

        function htmlEncode(value) {
        //create a in-memory div, set it's inner text(which jQuery automatically encodes)
        //then grab the encoded contents back out.  The div never exists on the page.
        return $('<div/>').text(value).html();
    }

并对我的 ajax 调用的一部分进行编码

$.ajax({
                type: 'POST',
                url: "https://pirates.com/SHIPSWS/shipDemo",
                data: {
                    "Bow": $("#BowTypes").val(),
                    "BodyContent": htmlEncode(CKEDITOR.instances.body.getData())
                },
                success: function (data) {
                    EmailBody = data;
                }
            })

现在它就像一个魅力。感谢大家的帮助!

(要解码 html，只需在服务中的数据上使用它)

function htmlDecode(value){
  return $('<div/>').html(value).text();
}