Hey guys I am fairly new to programming so this is probably a very easy solution but I keep getting a CORS error when trying to run this program. (the api key was blocked for my safety). This code is pretty unorganized but once I can get a request working I will create an object for all the values.

This is the error I get with a live-server from the Chrome console:

Access to fetch at 'https://labelsupply.io/api/order' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

Here is the code for the POST request

document.querySelector('.btn-order').addEventListener('click', function(){
    
    Type = document.querySelector('#type').value;
    Weight = document.querySelector("#weight").value;
    FromCountry = "US";
    FromName = document.querySelector('#fromName').value;
    FromCompany = document.querySelector('#fromCompany').value;
    FromStreet = document.querySelector('#fromStreet').value;
    FromStreet2 = document.querySelector('#fromStreet2').value;
    FromCity = document.querySelector('#fromCity').value;
    FromState = document.querySelector('#fromState').value;
    FromZip = document.querySelector('#fromZip').value;
    ToCountry = 'US';
    ToName = document.querySelector('#ToName').value;
    ToCompany = document.querySelector('#ToCompany').value;
    ToStreet = document.querySelector('#ToStreet').value;
    ToStreet2 = document.querySelector('#ToStreet2').value;
    ToCity = document.querySelector('#ToCity').value;
    ToState = document.querySelector('#ToState').value;
    ToZip = document.querySelector('#ToZip').value;

    console.log(Type, Weight, FromCountry, FromName, FromCompany, FromStreet, FromStreet2, FromCity, FromState, FromZip);


    const data = {
        Type: '32854090-03dd-a3c1-a8c5-183d17a6e9a6',
        Weight: '12',
        FromCountry: 'US',
        FromName: '',
        FromCompany: '',
        FromStreet: '',
        FromStreet2: '',
        FromCity: '',
        FromState: '',
        FromZip: '',
        ToCountry: 'US',
        ToName: '',
        ToCompany: '',
        ToStreet: '',
        ToStreet2: '',
        ToCity: '',
        ToState: '',
        ToZip: ''
      };
      
      const headers = {
        'Content-Type': 'application/www-x-form-urlencoded',
        'X-Api-Auth': '000000000-0000000-000000-000000000',
        'Access-Control-Allow-Credentials': true
      };
      
      // Encode the data as a query string
      const queryString = new URLSearchParams(data).toString();
      
      fetch('https://labelsupply.io/api/order', {
        method: 'POST',
        headers: headers,
        credentials: 'include',
        body: queryString
      })
      .then(response => response.json())
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.log(error);
      });
      
        
    })

I have tried using - credentials: 'include' but this results in the same error. I also have tried using lots of different header types. Maybe there is a better way to fix this CORS error. Any tips for any of my code will be helpful.

Thank you in advance :)

CodePudding user response：

This is a common issue, this happens if the server is not configured to allow requests from the domain making the request, or if the client is making a request to a server that does not support CORS.

You have to run the code on the server side because these errors occur only on client-side requests which the server cannot accept you request unless the server is configured to receive such requests.

CodePudding user response：

You need to enable CORS. Make an HTTP request from a server. Use a proxy server