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

Question

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

弹出窗口.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'})

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

Answer 1

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

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

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

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