当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - "No 'Access-Control-Allow-Origin' header is present" when trying to interact with Google Contacts API from Chrome extension

问题描述:

My goal is to get a chrome extension to be able to add a contact to google contacts. The files are:

manifest.json

{

"manifest_version": 2,

"name": "My friend joe",

"version": "1.0",

"description": "Add Joe to google contacts",

"browser_action": {},

"background": {

"scripts": ["background.js"]

},

"permissions": [

"identity"

],

"oauth2": {

"client_id": "1038191206887-v1987tg5v07mp166l0pm68qqblojvpll.apps.googleusercontent.com",

"scopes": ["https://www.google.com/m8/feeds/"]

}

}

background.js

chrome.browserAction.onClicked.addListener(add_joe);

function add_joe() {

chrome.identity.getAuthToken({"interactive": true}, add_contact);

return true;

}

function add_contact(t) {

console.log('Token: ' + t);

// Generate the body of the XMLHttpRequest

xhr_body =

`<atom:entry xmlns:atom="http://www.w3.org/2005/Atom"

xmlns:gd="http://schemas.google.com/g/2005">

<atom:category scheme="http://schemas.google.com/g/2005#kind"

term="http://schemas.google.com/contact/2008#contact"/>

<gd:name>

<gd:fullName>Joe Schmoe</gd:fullName>

</gd:name>

</atom:entry>`;

var xhr = new XMLHttpRequest();

xhr.open("POST", "https://www.google.com/m8/feeds/contacts/default/full");

xhr.setRequestHeader("Content-Type", "application/atom+xml");

xhr.setRequestHeader("GData-Version", "3.0");

xhr.setRequestHeader("Authorization", "Bearer " + t);

xhr.send(xhr_body);

}

The error that shows up


Steps taken prior to error occurring:

Created an API key with google for a chrome extension

Added the API key to the manifest. Then I loaded the unpacked extension into chrome using developer mode

Then I clicked the extension's icon

That's when the error occurs as shown in the screenshot above. This can be seen by clicking on Inspect views: background page on the extensions page and viewing the console.


Resources referenced:

I'm using the Creating contacts section of the Google Contacts API to determine the request headers and request body. Also it says "To create a new contact, send an authorized POST request".

How to send an authorized request is demonstrated in their javascript API client library docs.

I know the problem stems from issues making a CORS request (Cross-Origin-Resource Sharing). That information is also in the javascript API client library docs but the only example code is using their client library function calls.

网友答案:

In the process of typing out my question I came across the answer. The specific docs I found are: https://developer.chrome.com/extensions/xhr. Just needed to add any domains I'm going to be making CORS requests to needed to be listed beforehand in the manifest.json. So after modifying my manifest to include:

"permissions": [
        "identity",
        "https://www.google.com/"
    ],

I was no longer getting the error and was actually receiving a 201 Created status code response.

分享给朋友:
您可能感兴趣的文章:
随机阅读: