Failed to fetch. Possible Reasons: CORS Network Failure URL scheme must be "http" or "https" for CORS request

Question

I'm trying to make a request to my local API from the Swagger documentation, but it always gives this error when I make the request

Meaningless

What's the error message on the Console tab in the browser dev tools? – Inmesh

Just got the same problem. Seems my network driver was down or something. Socket couldn't open. After reboot everything was back. No clue about the root cause, I'm interested if you find something or if a reboot helped you too – Tapir

Consegui resolver o problema, na verdade o problema estava na própria API que eu estava tentando acessar. – Meaningless

@IagoAlexandre What was the problem? I'm still having this same problem – Stott

I just had this problem. After a few hours trying to figure out what was causing it I found that it was related to a Cookie I was adding to the response. The problem was that the Cookie was too big but there was no error indicating the actual problem. – Peridotite

Please share more details, like the error message in text form, along with your attempts to reoslve the problem – Pimental

Answer 1

First check that your address is not blocked by cors, for dev tests you can use Access-Control-Allow-Origin:*. If it doesn't work for you, check that you are not using an extension on your browser, such as those that block ads. You delete it from your browser, restart it and test again, it will work.

Channel

Answer 2

In my case, I was accessing the web application via 127.0.0.1:3000, once I changed it to localhost:3000, it worked, hope that helps

Bristol

Answer 3

after Starting IIS Express ... web API register on 2 URL, one port is for http, and the other one is for https. when you call http port you see this error:Failed to fetch. Possible Reasons: CORS Network Failure URL scheme must be "http" or "https" for CORS request. change the port to https Port.

Sochor

Answer 4

In swagger.json I accidently sat my host port to http://localhost:3000 and my server was running on port :5000. Once I updated the host port to match the one I'm using to send my requests using swagger ui, the problem's gone.

Chic

Answer 5

With Open API Swagger Implementation, it worked for me by adding this to main application class.

@OpenAPIDefinition(
  servers = {
    @Server(url = "/myapp/", description = "Default Server URL")
  }
)

This allows both http and https connections without needing to select the scheme explicitly. So, both local (http) and dev server (https) works good.

Skirmish

Thanks! It did not fix my issue, but the issue was related to Open API server. – Gabey

Answer 6

Choose the "http" option at the run icon on the top of the screen:

Grammer

this suggestion could be useful but it is not totally clear what you are setting the http option for. It's helpful to explain external links – Soilasoilage

Answer 7

A bit of an edge-case situation, but if you are running from a container, ensure you are doing your port forwarding correctly.

As one of the answers above states, your application should be running on localhost:<port_of_choice> instead of 127.0.0.1:<port_of_choice>

Bankruptcy

Too, for me it was as simple, as changing the actual port of my backend. – Month

Maybe that port was exposed by default. – Bankruptcy

Answer 8

Well it is not that stupid, i had the exact same message and my db was actually not ready ;) I run npm start in the terminal and it works.

Hel

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Maria

Answer 9

For all users that also use FastApi, this resolved my issue:

from fastapi.middleware.cors import CORSMiddleware

# Define CORS settings
origins = ["*"]  # Allow requests from any origin

# Add CORS middleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    allow_headers=["*"],
)

Cockerham

Answer 10

I was encounter with same issue -To solve this make sure the port at which your application is running and port mention in server.js (servers URL ) of swagger is same.

And then try again

Washday

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Tycoon

Answer 11

In my case, I solved the issue by changing the site settings of the API that I'm using, in particular by allowing this permission:

Regionalism

Answer 12

I use Spring boot, and in my Swagger config i fixed it by changing :

 @Server(
       url = "localhost:8080",
       description = "LOCAL"
 )

to :

 @Server(
     url = "http://localhost:8080",
     description = "LOCAL"
 )

Also declare this Bean in your swagger config :

    @Bean
    public CorsFilter corsFilter() {
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

            CorsConfiguration config = new CorsConfiguration();
            config.setAllowCredentials(true);
            config.addAllowedOrigin("*");
            config.addAllowedHeader("*");
            config.addAllowedMethod("*");

            source.registerCorsConfiguration("/v3/api-docs", config);
            return new CorsFilter(source);
    }

Kerianne

Answer 13

In my case, the API was implemented using Flask and the API itself did not have CORS enabled.

I enabled it by adding following piece of code:

from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)

PS: you will need to install flask-cors by runnings:

pip install flask-cors

Larkins

Answer 14

I use laravel recently got this same error , So I set this parameter 'APP_URL, APP_WEB_URL, L5_SWAGGER_CONST_HOST' in my env file and then run swagger generate command this resolved my issue. I am adding image for reference enter image description here

Allyn

Answer 15

I know this is stupid but check if the server is runing

Gomulka

Yes, that's stupid: if the server would not be running, the error message would look different – Pimental