javascript - 为什么 javascript fetch API 将请求从 POST 更改为 OPTIONS？

Question

我只想在用户点击链接或打开链接时将数据发布到 API。

下面是我尝试发布的数据的 JSON 格式，

{
    "username": "somename",
    "email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87f4e8eae2e8e9e2c7e0eae6eeeba9e4e8ea" rel="noreferrer noopener nofollow">[email protected]</a>",
    "mobile": "xxxxxxxxxx",
    "url": "https://www.atatus.com/blog/fetch-api/"
}

manifest.json 文件如下，

{
    "manifest_version": 2,

    "name": "UserData save to Chrome",
    "description": "Save the data to the API",
    "version": "1.0",

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "login.html",
        "defult_title": "UserData save to Chrome"
    },
    "background": {
        "scripts": ["url.js", "popup.js"]
    },
    "permissions": [
        "activeTab",
        "storage",
        "history"
    ]
}

下面是用于弹出表单的 HTML 文件，

<form class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">
    <input class="form-control" autofocus="autofocus" placeholder="Username" id="id_username" type="text" name="username" required/><br>

    <input class="form-control" autofocus="autofocus" placeholder="Email Address" id="id_email" type="email" name="email" required/><br>

    <input class="form-control" autofocus="autofocus" placeholder="Mobile" id="id_mobile" type="text" name="mobile" required/><br>

    <button id="save" type="submit" class="btn btn-success">SAVE</button>
</form>

<script src="popup.js"></script>

popup.js 是我用来将数据本地存储到 Chrome 存储的 JavaScript 文件，

function saveChanges() {

    var user = document.getElementById("id_username").value;
    var email_id = document.getElementById("id_email").value;
    var mobile_no = document.getElementById("id_mobile").value;

    chrome.storage.local.set({
        'username': user,
        'email': email_id,
        'mobile': mobile_no
    }, function() {
        alert("Data Saved Successfully " + user + " - " + email_id + " - " + mobile_no);
        window.close();
    });
}

document.getElementById("save").onclick=saveChanges;

最后在后台运行的 url.js 文件如下，

chrome.storage.local.get({"username": [], "email": [], "mobile": []}, 
function(user) {
    if (!user) {
        alert("You're not logged in.");
    }

    chrome.history.onVisited.addListener(function (data) {
        save_api(user, data);
    });
})


function save_api(user, data) {
    alert("Saving data....");
    var user_data = {
        "username": user.username,
        "email": user.email,
        "mobile": user.mobile,
        "url": data.url
    }

    alert(JSON.stringify(user_data));

    fetch("http://127.0.0.1:8000/api/extension/", {
        method: "POST",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(user_data)
    });
}

请求的 URL 是，

url(r'^api/extension/$', extension_view.ExtensionAPI.as_view()),

下面的代码是包含 post 方法的 django View ，

class ExtensionAPI(APIView):

    def get(self, request):
        acc = Account.objects.all()
        return Response(ExtensionSerializer(acc, many=True).data)

    def post(self, request):
        cust_user_name = request.data.get('username', None)
        cust_email = request.data.get('email', None)
        cust_mobile = request.data.get('mobile', None)
        cust_url = request.data.get('url', None)

        account_details = Account.objects.create(
            username=cust_user_name,
            email=cust_email,
            mobile=cust_mobile,
            url=cust_url
        )
        account_details.save()

        return Response({'status': 'success'})

现在我面临的问题是，除了 fetch api 之外，一切都按预期工作。当我尝试发布数据时，它会将请求类型从发布更改为选项。而且数据也没有保存到数据库!请有人帮我解决这个问题。

Answer 1

浏览器自动发送OPTIONS请求来检查服务器的响应 header ，检查CORS header 。

您可以做的是将服务器的域添加到扩展程序的权限列表中:

"permissions": [
         ....
         "http://yourDomain.com/*"
]

或者更改服务器的响应 header 以允许来自任何域的访问。