Ways to stop the transmission of the Origin HTTP header in the Chrome browser?

Scenario:

  1. I am managing a production web server, such as https://example.com, which is configured with CORS restrictions that do not allow localhost origins.
  2. Developers working on localhost are creating a new page/module that requires making AJAX calls to the production server during development. They are using Chrome with command line arguments --disable-web-security --user-data-dir=chromeNoCors to allow AJAX calls without the Origin header.
  3. The issue arises when only GET requests are sent without the header. POST requests still include the header, causing the production server to compare the header value (http://localhost:5678) with the allowed set of origins and denying access to the requested resource.

Query: Is there a way to completely prevent the sending of the Origin HTTP header?

I understand that a workaround would be to add "localhost" (or a specific host) to the list of allowed origins on the production server, but I would prefer to avoid this if possible.

Answer №1

My suggestion is to create a basic "proxy server" using a short script in node.js or python. This server should redirect all requests to your remote API server while removing any origin information from the headers. Implementing this should only require using a simple regular expression.

By adopting this straightforward approach, you can easily transfer it to different servers. For the AJAX implementation, all you have to do is adjust the hostname to either localhost or the IP address of your testing proxy server.

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

Setting `tabBarVisible` to false does not function properly within a stackNavigation nested element

Details on my project dependencies: "react-navigation": "^3.6.0", "expo": "^32.0.0" I'm working with a TabNavigator that contains redirections to child components, which are StackNavigators. However, I'm facing an issue where I am unable to hide ...

unable to insert logo into HTML

I am customizing an HTML template, but the dimensions of the logo in the template are smaller than my logo. Despite adding my logo to the template, it is not showing up. @media (max-width: 673px) { #logo { margin-left: 20px; } } #header #logo ...

What is the process of retrieving an image file in a Java post API when it is being transmitted as form data through Jquery?

I have encountered an issue with fetching file data in my POST API when utilizing three input file fields in JavaScript. The values are being sent using formdata in jQuery upon clicking the submit button, but I am experiencing difficulties in retrieving th ...

Utilize CountUp.js to generate a dynamic timer for tracking days and hours

I am looking to create a unique counter similar to the one featured on this website https://inorganik.github.io/countUp.js/ that counts up to a specific number representing hours. My goal is to display it in a format such as 3d13h, indicating days and hour ...

Incorporating additional information into the database

When I run the code, I see a table and a button. After entering data in the prompts as instructed, the table does not get updated. I'm unsure why this is happening. Can someone please explain? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

Basic inquiries concerning Vue.js and JavaScript

Hey there, I recently developed a small app to practice my Vue skills. However, there are a few features that I would like to implement but I'm not sure how to do it just yet. <div class="container" id="app"> <div class="row"> <d ...

What could be the reason behind jQuery replacing the entire span with .text?

I am dealing with the following HTML code snippet: <p><input id="revenue" type="text" value="100000" /><span id="howmuch"><a href="" class="ka_button small_button small_cherry" target="_self" style="opacity: 1; "><span>How Mu ...

One of the quirks of Angularjs is that the ng-enter animation will only be

The initial animation only occurs the first time. I am utilizing Angularjs version 1.2.22 Here is the CSS that I am using : .ng-enter { animation: bounceInUp 2s; } .ng-leave { animation: bounceOutUp 2s; } And this is the route configuration : ...

After ReactDOM is used, the JavaScript code is no longer functioning properly

While working on my latest project, I utilized react.js and encountered an issue where javascript seemed to stop working when using ReactDOM to render a class extended from React.Component. I noticed that the alert() method would not work if it was placed ...

How can I access data from a function that is executed within a method in Vue.js?

When working with vuejs and JS scopes, passing a value to a style property inside data can be tricky. The issue arises when trying to access this.data.property: Vue.component ('loader-component', { template: '#loader-template', mo ...

The xmlhttp object parameter is not defined. JavaScript AJAX

As a newcomer to javascript and ajax, I am trying my best to understand it all. I followed a tutorial to write this code, but I can't seem to figure out what I did wrong. If you click here, you can see the live version. The error message that Firebug ...

How to Utilize Custom Component Tag Names in CSS with Vue.js 2?

<template> <header> <hamburger></hamburger> <app-title></app-title> <lives></lives> </header> </template> <script> export default { name: 'Titlebar& ...

Utilizing jQuery to Uppercase the Ajax Attribute

Lately, I've encountered an issue where I need to format the text input before sending it to ajax and saving it in the database. Specifically, I want to convert the text to lowercase and then capitalize the first letter before storing it. Here's ...

Is it possible to utilize the default error handling page rather than a specific view for expressing

Currently, I'm going through a tutorial on MDN Express for building a "Local Library" application that utilizes Pug (Jade) as its templating engine. In this segment of the tutorial, it explains the process of creating a controller to manage a form POS ...

Learn how to prevent two-finger swipe forward/backward on a trackpad using JavaScript or HTML

My app includes a functionality where the URL changes when transitioning from one state to another, for example from home/#state to home/#state2. However, I noticed that when I perform a two-finger swipe using the trackpad from home/#state2, the page navig ...

What occurs when Click events are triggered on an <object> element?

I have set up a div, and inside that container, I embedded an SVG image using object (which I plan to manipulate later...). <div id="click-me"> some random Text <object data="some.svg" /> </div> Next, I added event listeners for t ...

Node.js and Express: Delivering Seamless Video Streaming via HTTP 206 Partial Content

Having a binary file like an mp4 video in a MarkLogic database, I am utilizing the Node.js API of the database to stream this document in segments. The structure is as follows: html document <video controls="controls" width="600"> <source src= ...

Creating a formatted JSON string from the data retrieved using a GET request and embedding it into an HTML template to be sent as the

Struggling to send JSON data retrieved from a GET METHOD as an email. The challenge is defining the body of the email using the obtained JSON object. Looking for solutions! Below is a snippet of my code: app.get('/userinfo',(req,res)=>{ ...

Tips for creating a shift function without using the splice method

I'm currently working on creating custom functions for common array operations. I've hit a roadblock trying to reimplement the shift method without using splice. Any tips or guidance on how to approach this challenge would be highly valued. Cust ...