為什么javascript fetch API會將請求從POST更改為OPTIONS？

Question

我只想在用戶點擊鏈接或打開鏈接時將數據發布到API。

下面是我試圖發布的數據的JSON格式，

{
    "username": "somename",
    "email": "someone@gmail.com",
    "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(r'^api/extension/$', extension_view.ExtensionAPI.as_view()),

下面的代碼是包含post方法的django視圖，

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請求以檢查服務器的響應頭，以檢查CORS頭。

您可以做的是將服務器的域添加到擴展的permissions列表：

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

或者更改服務器的響應標頭以允許從任何域進行訪問。