Attempting to send an HTTP request to an insecure API in NEXTJS in a production environment has resulted in failure

When attempting to send a request to a public API that is not hosted in HTTPS but instead in HTTP, everything works fine locally on localhost. However, upon deploying to Vercel production build with the API URL changed to HTTPS, an error occurs.

axios.get('http://api');

What is the best way to resolve this issue?

Answer №1

Yes, it is possible, but you must be aware of the potential risks involved. You can also explore alternatives like using "jsonp" or "cors" in your ajax requests. The following response is tailored for jQuery, although enabling certain headers may make it work. Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource

Answer №2

To securely access insecure APIs on Vercel, I've implemented a method involving a lambda function for request redirection. This involves setting up a lambda function with HTTPS on either AWS or Digital Ocean and then directing Next requests to the URL of that function.

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

Strategies for sending information to the server via ajax and PHP differ. Simply typing $_POST['data'] may not yield the desired result

I am trying to send some information from an HTML form to the server using a PHP script before submitting it. The process involves using the .ajax() jQuery function. Below is my demo.html code: <script src="https://ajax.googleapis.com/ajax/libs/jquery ...

Running a script through the terminal using an electron js application, but the process necessitates the installation of node js

I am currently working on a project that involves running a script through the system terminal using my Electron.js application. However, I am facing an issue with new users who may not be technically proficient and do not have Node.js installed on their s ...

Top method to incorporate reusable SVG elements in React applications

I have implemented SVG as a reusable component in my React application. Here is a sample of the SVG component: import React from 'react'; export default function IconComponent(): JSX.Element { const svg = ` <svg width="40" h ...

Passing properties to the App component in React

Recently, I discovered how to pass props between components in React. Initially, I passed props from <FileTree> to <TextBox>, which you can see in action here: https://codesandbox.io/s/y018010qk9 After reorganizing my code, I structured my Rea ...

passing a variable from PHP to JavaScript

When I attempted to transfer variables from PHP to JavaScript, I found myself quite confused. It was straightforward for me to retrieve values using an ID, like this: var name = $("#name").val(); However, my question is if I want to convert a variable li ...

Struggling with mocking axios calls in tests? Constantly encountering errors like "argument of type is not assignable to parameter of type"? Here

Can anyone help me with mocking an axios call in my jest test? Here is what I have tried: jest.mock('axios'); const mockedAxios = axios as jest.Mocked<typeof axios>; test('testing something', () => { ... mockedAxios.get. ...

Is there a way for me to execute a function multiple times in a continuous manner?

I am attempting to create a blinking box by calling a function within itself. The function I have is as follows: $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle("slow"); }); }); <script src="https://a ...

Getting the Mongoose Model using Express parameters is a simple process

Is it possible to dynamically fetch a mongoose model based on the req.params.model? Check out this example of a Schema const mongoose = require("mongoose"); const Schema = mongoose.Schema; const SmartSchema = new Schema({ SmartPriority: { type: Stri ...

Why am I receiving varied results when trying to filter for distinct date values?

While attempting to filter unique dates, I've noticed that the output varies. In some cases, it works correctly, while in others, it does not. I'm having trouble figuring out what's causing this inconsistency. The filtering method below gene ...

Implementing hover-over tooltips with JavaScript and HTML

New JS function: function DisplayToolTip() { let x = event.clientX; let y = event.clientY; document.getElementById('divToolTip').style.left = x + 'px'; document.getElementById('divToolTip').style.top = y + &ap ...

route in mean stack isn't providing a response

I am having trouble creating a controller for /projects that should return all the data in the 'work' collection. The call is completing successfully with a status code of 200, but it is only returning an empty array or 'test:test' if u ...

Solving Problems with Inline Tables using Angular, Express, and Mongoose's PUT Method

For the past few days, I've been struggling to figure out why my PUT request in my angular/node train schedule application isn't functioning properly. Everything else - GET, POST, DELETE - is working fine, and I can successfully update using Post ...

Extract the color of an individual character

There is a code snippet in JavaScript using p5.js that functions as a video filter: const density = ' .:░▒▓█' //const density = ' .tiITesgESG' //let geist; let video let asciiDiv let playing = false let ...

jQuery UI - Inconsistent results with multiple autocomplete feature

I am facing an issue with the tags.json file provided below: [ {"label" : "Aragorn"}, {"label" : "Arwen"}, {"label" : "Bilbo Baggins"}, {"label" : "Boromir"} ] In addition, I have a JavaScript code snippet (which ...

Adding an arrow to a Material UI popover similar to a Tooltip

Can an Arrow be added to the Popover similar to the one in the ToolTip? https://i.stack.imgur.com/syWfg.png https://i.stack.imgur.com/4vBpC.png Is it possible to include an Arrow in the design of the Popover? ...

What is the process for incorporating a sitemap in Next.js without relying on npm packages?

After adding my sitemap to the Next.js pages folder in a new file named sitemap.xml, I encountered an issue when trying to access it using the URL http://localhost:3000/sitemap.xml. A 404 error page not found is displayed. I need to submit my sitemap URL t ...

Synchronizing other components with a filtered query from the List in Admin-on-rest: Best practices

I am looking to incorporate the following structure into my page: 1. Cards displaying summaries (revenue, users, etc.) 2. Google Maps integration 3. List element Within the List element, there is filtering involved. I am struggling with how to utili ...

When running the command "npx create-next-app@latest --ts," be aware that there are 3 high severity vulnerabilities present. One of the vulnerabilities is that "node-fetch

Just set up a fresh project with Next.js and TypeScript by following the documentation using npx create-next-app@latest --ts. Encountering multiple high severity vulnerabilities despite running npm audit fix --force, which actually adds more vulnerabiliti ...

AngularJS ng-show will not function properly with newly added DOM elements

I am encountering an issue with ng-show directives on dynamically added DOM elements in AngularJS. The directives work fine when the page initially loads, but new elements that are added later do not have their expressions evaluated. Is there a way to prom ...

Capture and set the new value of the Datetime picker in MUI upon user's acceptance click

import React from 'react' import { Stack, Typography } from '@mui/material' import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker' import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers&ap ...