Chrome is displaying an error message: "The origin file:// is not permitted by Access-Control-Allow-Origin."

Currently, I am in the process of developing a Chrome extension that requires access to a site called minus.com, which implements oAuth 2.0 for authentication. To facilitate this, I have created a javascript file named 'test.js' and integrated it into an HTML file called 'test.html'. Subsequently, I loaded 'test.html' in Chrome to test the javascript code that handles the authentication process.

The structure of the 'test.js' file is as follows:

function Ajax(url, options) {

// contents of the function

    // Data transmission
    if (options.method === "POST" && (options.params || options.binaryData)) {
        if (options.binaryData) {
            xhr.sendAsBinary(options.binaryData);
        } else {
            xhr.send(hashToQueryString(options.params));
        }
    } else {
        xhr.send(null);
    }

    return xhr;
}

function refreshToken(refresh_token) {
    var params = {
        'grant_type': 'refresh_token',
        'client_id': API_KEY,
        'client_secret': API_SECRET,
        'refresh_token': refresh_token,
        'scope': 'read_all modify_all upload_new'
    }

    new Ajax("https://minus.com/oauth/token", {
        params: params,

        onSuccess: function(response) {
            console.log(response.access_token);
        },

        onError: function(response) {
            console.log('error: wrong_token');
        }
    });               
}

refreshToken();

Upon loading 'test.html' in Chrome to test 'test.js', an error appeared in the console stating "XMLHttpRequest cannot load ?... Origin file:// is not allowed by Access-Control-Allow-Origin." I attempted to resolve this issue by launching Chrome with the options "--allow-file-access-from-files" or "--disable-web-security", but unfortunately, the problem persisted. Interestingly, commenting out the "Data transmission" segment in the "Ajax" function led to the elimination of the error.

It would be greatly appreciated if anyone could provide insights into what may be causing this issue.

Thank you!

Answer №1

If you want to solve your specific issue, you must include the hosts you wish to allow cross-domain access to in your extension's manifest file:

http://code.google.com/chrome/extensions/xhr.html

{
  "name": "My customized extension",
  ...
  "permissions": [
    "https://*.example.com/"
  ],
  ...
}

update

Additionally, I have encountered strange cross-domain problems in Chrome when numerous extensions are enabled. To resolve this, I typically disable a few extensions, refresh the extension, and sometimes restart Chrome.

Answer №2

The solution is to transform your application into a packaged application that allows for cross domain calls. Hosted applications are not able to perform this function.

You might also find it helpful to check out this resource on Cross-Origin XMLHttpRequest in Chrome extensions

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a method in AngularJS to automatically set app.comment to null if the point is not equal to 1 using front end logic?

Can we verify on the front end in AngularJS if app.point !=1 and app.comment==null? <td> <input type="number" max="5" min="1" ng-init="app.point=5" data-ng-model="app.point"> </td> < ...

The email validation UI dialog is failing to display any dialog

<html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"& ...

"Utilizing jQuery, Ajax, and the powerful REDIRECT_QUERY_STRING feature

Recently, I decided to revamp a small website consisting of three or four pages using a minimalist MVC framework (which might be excessive, but I wanted to experiment). The site is configured with an .htaccess file: RewriteEngine on RewriteCond %{REQUE ...

What is the best way to ensure that an ASync function only continues once all necessary information has been collected?

retrieveStudentGrades() { let grades = {}; let totalStudents = this.state.studentDetails.length; let studentCount = 0; this.state.courses.map((course) => { this.state.studentDetails.map((student) => { request.get( ...

Passing data from the server to the HTML page for manipulation

I need assistance in retrieving and manipulating the value stored in the variable $result[] from a PHP file to my HTML file for further processing. Can you provide guidance or reference code on how to return data from server side to client side? Here is a ...

Executing functions in a loop using Angular

Within my component, there is a foreach loop triggered when a client is selected. Inside this loop, I need to execute a function within the same component. The issue arises with calling the function using `this.functionName()` because 'this' no ...

Exploring the use of ngResource in conjunction with HttpBackend - Potentially unreached rejection issue

Issue Currently, I am working on testing a controller utilizing Karma, Mocha, Chai, and PhantomJS as part of the testing process. IndexCtrl.js (simplified) app.controller('IndexCtrl', ['$scope', '$resource', function($scope ...

The jQuery ajax function is not properly displaying or hiding the loader div

While attempting to call PHP code using a jQuery AJAX function, I encountered an issue where I wanted to display a loader div while the request was being sent and then hide the div once the request was complete. To simulate this scenario, I deliberately de ...

The offcanvas close button fails to function if initialized through JavaScript

I have integrated offcanvas into the page layout. By default, it remains hidden but I want it to be visible at all times on large screens. On smaller screens, there should be a button to dismiss it, as well as another button in the menu panel to show the o ...

Getting user input with JQuery and dynamically updating CSS properties

<img src="purplemoon.png" alt="Purple moon" id="moon-photo" /> <table> <tr> <th colspan="4">Control panel</th> </tr> <tr> <td> <!-- attempting to retrieve value from the input field ...

Is there a way for me to retrieve the input text value and display it in my modal window?

When using jQuery, I want my text field to appear in my modal. The code seems to work fine when I check the checkbox, but nothing shows up when I try to use the text field. How can I resolve this issue? Body <body> <div id="hasildetail" clas ...

Sending input values from textboxes to the Controller

I currently have the following code snippets: Home Controller: public IActionResult Index() { return View(); } public ActionResult Transfer() { string path = @Url.Content(webRootPath + "\\SampleData\\TruckDtrSource.json&q ...

What could be causing such a significant variance in performance for a wrapped JavaScript function?

Here is a code snippet that I have been experimenting with: function Run () { var n = 2*1e7; var inside = 0; while (n--) { if (Math.pow(Math.random(), 2) + Math.pow(Math.random(), 2) < 1) inside++; } return inside; } var s ...

Tips on accessing real-time data from a JSON file

I have been working on this project for a while now and wrote some test scripts. I am using setInterval to update the content every 500 seconds, but I am facing an issue with accessing the input fields. For example, if there is a form with input fields, I ...

Executing XSS Reflected Attack by Loading an External JS Script via POST Parameter

Experimenting with XSS attacks on my vbox machines, just for kicks! I have two .html files - one works and the other doesn't. The file that works contains: <html> <head></head> <body> <form method="post" action=&q ...

What is preventing me from making a call to localhost:5000 from localhost:3000 using axios in React?

I have a React application running on localhost:3000. Within this app, I am making a GET request using axios to http://localhost:5000/fblogin. const Login = () => { const options = { method: "GET", url: "http://localhost:5000/fblogin", ...

"Dynamic Navigation: How to Utilize Ajax for Efficient

I have a scenario where I am utilizing Ajax within the admin section of my PHP application. The URL that I am working with is www.mysite.com/admin/product/search/. When a button is clicked, the intention is for my ajax call to trigger PHP code from another ...

Next.js allows you to create a single page that corresponds to the root path '/' as well as a dynamic route '/param'

I have a single-page website built with Next.js. The home page, which displays a list of products, is located at route / and the corresponding code can be found in pages/index.js. Each product has an id, allowing users to jump directly to it using /#produc ...

Identifying the various types in Typescript

In the process of developing a solution for Excel involving data from an Office API, I encountered the challenge of distinguishing between different types that a function can return. Specifically, the data retrieved as a string may belong to either a "Cell ...

Transferring information between two separate components

Hey there, I'm struggling with the Payment Component. What I want to achieve is that when I click on a link, it transfers (ClassG, imageG, and PriceG) to the Payment Component where I can then style them accordingly. I've attempted something, but ...