title: How do I resolve a cors error on a fetch or 401?
body: <p>So I've been experiencing this CORS error and a 401 and have tried chrome plugins to allow for cors with no luck. Here are the errors I'm getting after disabling cors via the plugin:</p>
  <pre><code>Access to fetch at 'https://api.playground.klarna.com/payments/v1/sessions' from origin 'https://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
  
  Failed to load resource: net::ERR_FAILED
  
  Error: TypeError: Failed to fetch
  </code></pre>
  <p>Before enabling the CORS Chrome Extension I was receiving a Allow-Access-Control-Origin is not set on the first error message. Along with this in the network tab I'm getting a 401 Preflight which indicates unauthorized but I'm setting the Authorization header with the correct credentials so not sure what's happening here. I'm using the codeigniter php framework.</p>
  <p>I'm using Basic auth with:</p>
  <pre><code>var auth = 'Basic ' + btoa(username:password);
  </code></pre>
  <p>Here's the code:</p>
  <pre><code>   let postDataSession = {
                      &quot;purchase_country&quot; : bookingData.purchase_country, 
                      &quot;purchase_currency&quot; : bookingData.purchase_currency,
                      &quot;locale&quot; : bookingData.locale,
                      &quot;order_amount&quot; : bookingData.order_amount,
                      &quot;order_tax_amount&quot; : 0,
                      &quot;order_lines&quot; : [{
                          //&quot;type&quot; : &quot;physical&quot;,
                          &quot;reference&quot; : bookingData.order_lines.reference,
                          &quot;name&quot; : bookingData.item_name,
                          &quot;quantity&quot; : 1,
                          &quot;unit_price&quot; : bookingData.order_amount,
                          &quot;tax_rate&quot; : 0,
                          &quot;total_amount&quot; : bookingData.order_amount,
                          &quot;total_discount_amount&quot;: 0,
                          &quot;total_tax_amount&quot; : 0
                      }]
                  };
  </code></pre>
  <pre><code>                    fetch('https://api.playground.klarna.com/payments/v1/sessions', {
                                  method: 'POST',
                                  //mode: 'no-cors',
                                  //Authorization: auth,
                                  headers: {
                                      'Content-Type': 'application/json',
                                      'Authorization':  auth,
                                      //'Access-Control-Allow-Credentials' : true,
                                      'Access-Control-Allow-Headers' : 'pm-u, pm-h0, pm-h1, pm-h3, pm-o0, pm-o1, pm-o2, pm-o3, authorization',   
                                      'Access-Control-Allow-Methods': 'POST',    
                                      'Access-Control-Allow-Origin': 'https://localhost',
                                      'ACCESS-CONTROL-MAX-AGE' : 3600,
                                      'referrer-policy': 'no-referrer-when-downgrade'
                                  },
                                  body: JSON.stringify(postDataSession),
                                  
                              })
                              .then(function(response) {
                               //The following method initializes the Klarna Payments JS library
                              //window.location.href = baseurl + &quot;customer/klarna_checkout_page&quot;;
  
                              if (!response.ok) {
                                  return response.text().then(result =&gt; Promise.reject(new Error(result)));
                                  console.log(response.status);
                               }
                                  console.log(response.json(), response);
                                  return response.json();
                              })
   
                             // .then(function(session) {
                             //     window.location.href = baseurl + &quot;customer/klarna_checkout_page&quot;;
                             // })
                              .then(function(result) {
                                  // If `redirectToCheckout` fails due to a browser or network
                                  // error, you should display the localized error message to your
                                  // customer using `error.message`.
                                  if (result.error) {
                                      alert(result.error.message);
                                  }
                                  console.log(result);
  
                              })
                              .catch(function(error) {
                                  console.error('Error:', error);
                              });
  
  </code></pre>
  <p>I've tried it the mode set to no-cors and receive the same response. I've used postman to post the request with the same data and in postman a response is received. Not sure if I'm either missing or overlooking something so a fresh perspective would be helpful. Does anyone have any idea how to proceed with resolving this issue? I want to avoid having to deploy this code to the live domain and be able to test the response on localhost, not sure if that's at all possible with cors.</p>