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

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

以下是我要发布的数据的JSON格式，

{
    "username": "somename",
    "email": "[e-mail]",
    "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()),

下面的代码是django视图，其中包含post方法，

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'})

现在，我面临的问题是，除了获取api之外，其他所有操作均符合预期。当我尝试发布数据时，它将请求的类型从发布更改为选项。而且数据也不会保存到数据库！请有人帮我解决此问题。

最佳答案

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

您可以做的是将服务器的域添加到扩展的permissions列表中：

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

或更改服务器的响应标头以允许从任何域进行访问。