Local development and the same origin policy: a necessary pairing

While working on my Ember front end calling a Spring/Rest/MongoDB backend running locally for development, I encountered a same origin policy error. I am curious about the common workarounds for this issue.

Below is the code snippet I'm using:

App = Ember.Application.create();

App.Router.map(function(){

});

App.IndexRoute = Ember.Route.extend({
   model: function(){
       return App.User.find();
   }
});

App.User = Ember.Model.extend({
    lastName: Ember.attr()
});

App.User.adapter = Ember.Adapter.create({
    findAll: function(klass, records) {
        $.getJSONP("http://localhost:8080/users").then(function(data) {
            records.load(klass, data.users);
        });
    }
})

Answer №1

The rule of same origin policy remains consistent even on the localhost as it is across the entire web. However, if you access your web application as a file (i.e., the URL begins with file:///), every other URI, including those of other files, will be considered to have a distinct origin.

To resolve this issue, host your application on a server running on your own machine, and then access it by navigating to http://localhost.

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

Issue with Retrieving the Correct Element ID in a Loop with JavaScript Function

I'm in the process of developing a dynamic wages table with HTML and JavaScript to compute each employee's wage based on input from each row. In order to achieve this, I've utilized a loop to assign a unique ID to the total cell in every ro ...

When the page loads, a JavaScript function is triggered

My switchDiv function in Javascript is being unexpectedly called when the page loads. It goes through each case in the switch statement, except for the default case. Does anyone know how to solve this issue? $(document).ready(function() { $("#be-button" ...

Disregard all numbers following the period in regex

I have developed a function to format numbers by adding commas every 3 digits: formatNumber: (num) => { return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') }, The issue with this function is that it also add ...

When attempting to load a page in Mozilla, the initial DIV code fails to load

When trying to load a page in Mozilla, the first DIV code is not loading. I attempted to load HTML inside using: <div id="mainContent"></div> with the following call: if (destinationURL != null) { $.get(destinationURL, function(data) { ...

Troubleshooting a problem with $addToSet and $each in Mongo and Node.js

I'm facing an issue while using $addToSet to add an array of Strings to a MongoDB database. The Object setup is defined as follows: var mongoose = require('mongoose'); var Schema = mongoose.Schema; module.exports = mongoose.model('Co ...

Verifying internet connectivity and updating content using jQuery and JavaScript

Upon loading the page, the following functionality occurs without triggering a click event: The updated code attempts to determine if the internet connection is active. If the connection is off, the 'link' on the page will be disabled (non-click ...

Center the text within the div and have it expand outwards from the middle if there is an abundance of text

I have a div that is in the shape of a square box and I want it to be centered. No matter how much text is inside, I would like it to remain in the middle. I am using JQuery to create my square box and would like to center it using CSS. Here is my code: &l ...

Executing a function from a JavaScript file within Robot Framework

It is possible to run javascript from a file. Run JavaScript ${CURDIR}/js_to_run.js However, I am wondering how to call a function by its name from this file? ...

I created a custom discord.js-commando command to announce all the channels that my bot is currently active in, however, encountered an unexpected error

const Commando = require('discord.js-commando'); module.exports = class AnnounceCommand extends Commando.Command { constructor(client) { super(client, { name: 'announce', aliases: ['an'], ...

Utilizing JSON and Javascript to dynamically generate and populate interactive tables

Here's how I've structured my JSON data to define a table: var arrTable = [{"table": "tblConfig", "def": [{"column": "Property", "type": "TEXT NOT NULL"}, {"column": "Value", "type": "TEXT NOT NULL"}], "data": [{"Property ...

Why does NPM not install the most recent version of the package during an update?

After installing nodemon using the command 'npm i nodemon', I always get the latest version, which is currently 2.0.2. However, if I decide to install an older version using another command, such as npm i someolderemail, and then try to update ...

What is the best way to display several markers on a Google Map at once?

I am currently working on a functionality where I retrieve latitude and longitude from a JSON file and display markers on a Google map. However, my issue is that only one marker is appearing on the Google map, while the others are not showing up. Below i ...

Guide to converting a specific tag into div using Javascript

I am working with some HTML code that includes a div: <div class="myDiv"> <a href="" title="">My link</a> <p>This is a paragraph</p> <script>//This is a script</script> </div> Additionally, I ha ...

Loop through an HTML table in order to emphasize variations in cells that contain multiple comparison items

I am interested in highlighting variances between the initial row of a table and all other rows based on columns. I have successfully managed to achieve this when each cell contains only one item/comparison. However, I would like to expand this to include ...

What is the best way to reset form after submission in Next.js?

I have a contact form and I want all the form values to be cleared after submitting the form. I've tried the following code, but the values of the form remain unchanged after submission. What could be causing this issue and how can it be resolved? ...

Uncovering the deepest levels of nested arrays and objects in JavaScript without any fancy libraries - a step-by-step guide!

I have been struggling to find a solution to a seemingly simple problem. Despite searching through various sites and resources, I have not been able to figure out how to iterate over the innermost levels of a doubly nested data structure. I have tried usin ...

Encountered an error with Aurelia webpack 4 when trying to load a necessary CSS file during runtime

I encountered a unique issue with webpack and aurelia that I can't seem to figure out. After creating a new webpack configuration based on online resources and official documentation, the compilation goes smoothly without any errors. However, during r ...

Exploring the process of querying two tables simultaneously in MySQL using PHP

I currently have a search box in my PHP file that only searches from the "countries" table. However, I also have another table called "continent" and I would like the search box to retrieve results from both the "countries" and "continent" tables. Here is ...

Interested in incorporating dynamic calendar entries in ASP C#?

Here is the code snippet I utilized: <script> var count = 1; var limitValue = 3; function addNewInput(sectionName) { if (count == limitValue) { alert("You have reached the limit of adding " + count + " inputs"); ...

What is the reason behind the content of a div tag not hiding while the content of a p tag does

<html> <head> <title>How to make a div content disappear when clicked?</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <scrip ...