为什么javascript获取API将请求从POST更改为OPTIONS？

我只想在用户单击链接或打开链接时将数据发布到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"
    ]
}

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

下面是用于弹出表单的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>

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

{
    "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"
    ]
}

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视图

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

---

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

浏览器会自动发送

选项

请求，以检查服务器的响应头，检查CORS头

您可以将服务器的域添加到扩展的

权限列表中：

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

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

请求可能是CORS预飞行。很好的捕获@Titus。谢谢你的帮助