The ‘Access-Control-Allow-Origin’ header contains multiple values

[Origin]: https://stackoverflow.com/questions/37594403/the-access-control-allow-origin-header-contains-multiple-values

i’m trying to send get request to api like it’s a login url

var url = "http://demo.software.travel/gptp/api/authorization?apiKey=****&alias=****&login=****&password=****"
$.get(url, function(data) {
    console.log(data);
});

i’m getting this in my console this error

XMLHttpRequest cannot load http://demo.software.travel/gptp/api/authorization?apiKey=****&alias=****&login=****&password=****. 
The 'Access-Control-Allow-Origin' header contains multiple values 'http://travellights.net, *', but only one is allowed. 
Origin 'http://travellights.net' is therefore not allowed access.

i’m trying to see questions here to solve it but i didn’t get what i need to change, this is annoying actually.

The ‘Access-Control-Allow-Origin’ header contains multiple values

this solved by asp.net web.congif

By the way i’m using CHROME BROWSER any help i appreciate.

UPDATE response headers:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:origin, x-requested-with, Content-Type, accept, Token
Access-Control-Allow-Methods:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS
Access-Control-Allow-Origin:http://travellights.net
Access-Control-Allow-Origin:*
Connection:close
Content-Encoding:gzip
Content-Type:application/json;charset=utf-8
Date:Thu, 02 Jun 2016 16:41:18 GMT
Server:nginx/1.1.19
Set-Cookie:JSESSIONID=51FEE1A1206B9B481DD3EEA4167A9256; Path=/gptp
Vary:Origin
Vary:Accept-Encoding
X-UA-Compatible:IE=EmulateIE7

Request Headers:

Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,ar;q=0.6,en-GB;q=0.4
Connection:keep-alive
Host:demo.software.travel
Origin:http://travellights.net
Referer:http://travellights.net/b2b/Pages/login?
User-Agent:Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36
shareedit

You are attempting to do Cross-origin resource sharing (CORS) which is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the resource originated. (such as accessing fonts or JSON files).

Browsers restrict your access to resources from other origins as of Same-origin policy as a security measure for internet users.

To get around this issue you have to options:

  1. allow CORS on the domain http://demo.software.travel (but there is are security concerns, more description about it here: https://www.owasp.org/index.php/HTML5_Security_Cheat_Sheet#Cross_Origin_Resource_Sharing)

Enable CORS on the server to be able to access other domains through. this can be done by adding the following headers to responses:

Access-Control-Allow-Origin: http://travellights.net Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
  1. if you are not granted resource sharing with that domain, you are allowed to use JSONP for read only operations (JSONP is inherently read-only)

JSONP wraps a JSON object in a callback, which technically makes the request a non-restricted resource (a script tag) hence can be shared across domains.

it can be done via vanilla js by adding a script tag onto the page.

function process(data) {
    // do stuff with JSON
}

var script = document.createElement('script');
script.src = '//domainURL?callback=process'

document.getElementsByTagName('head')[0].appendChild(script);

or you can use jquery to achieve the same:

$.ajax({enter code here
    url: "http://query.yahooapis.com/v1/public/yql",
    jsonp: "callback",
    dataType: "jsonp",
    data: {
        q: "select title,abstract,url from search.news where query=\"cat\"",
        format: "json"
    },
    success: function( response ) {
        console.log( response ); // server response
    }
});

jquery documentation: https://learn.jquery.com/ajax/working-with-jsonp/

shareedit

If you set “Full” CORS (with OPTION pre-request) on in nginx by add ‘access-control-allow-origin *’ and independently you add that header (for Simple CORS – without OPTION pre-request) to each response in SERVER (eg. php):

header('Access-Control-Allow-Origin', "*");

Then you will get this problem. Solution: remove code which add this header in server if already you add this header in your nginx config 🙂

I found this advice here

shareedit
Advertisements

Why does my JavaScript get a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error when Postman does not?

[Origin]: https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present

I am trying to do authorization using JavaScript by connecting to the RESTful API built in Flask. However, when I make the request, I get the following error:

XMLHttpRequest cannot load http://myApiUrl/login. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

I know that the API or remote resource must set the header, but why did it work when I made the request via the Chrome extension Postman?

This is the request code:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.

When you are using postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they’re limited by the same origin policy. Extensions aren’t so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

shareedit
shareedit

For C# web services – webapi

Please add the following code in your web.config file under <system.webServer> tag. This will work.

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Please make sure you are not doing any mistake in the Ajax call.

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);
    },
    error: function () {
        console.log("error");
    }
});

Angular 4 issue, please refer to How to fix Angular 4 API call issues.

shareedit

Why use angular’s $log instead of console.log?

[Origin]: https://stackoverflow.com/questions/24185847/why-use-angulars-log-instead-of-console-log

I understand it is a best practice in angular to use $log instead of console.log. However, I can’t find good documentation explaining the reasons. Why should a developer use $log?

$log first checks if the browser supports console.log (IE 8, for example, doesn’t). This prevents errors being displayed on IE 8. Note: this doesn’t mean it will log anything on IE 8, it simply means it won’t throw the error.

Next to that, it also allows you to decorate and mock $log for extending and testing purposes, if you are so inclined. You could for example decorate it to log to an array for IE 8 support.

A bonus feature: if you pass it a JavaScript Error instance, it will attempt to format it nicely. This can be found out by reading the source code.

EDIT: “It is not that IE 8 doesn’t support console.log. It just doesn’t create the console object until the dev tools are opened.” See comments below for more details.

Where should I put tags in HTML markup?

[Origin]: https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup

When embedding JavaScript in an HTML document, where is the proper place to put the tags and included JavaScript? I seem to recall that you are not supposed to place these in the  section, but placing at the beginning of the  section is bad, too, since the JavaScript will have to be parsed before the page is rendered completely (or something like that). This seems to leave the end of the  section as a logical place for  tags.

So, where is the right place to put the  tags?

(This question references this question, in which it was suggested that JavaScript function calls should be moved from  tags to  tags. I’m specifically using jQuery, but more general answers are also appropriate.)

shareedit

Here’s what happens when a browser loads a website with a  tag on it:

  1. Fetch the HTML page (e.g. index.html)
  2. Begin parsing the HTML
  3. The parser encounters a  tag referencing an external script file.
  4. The browser requests the script file. Meanwhile, the parser blocks and stops parsing the other HTML on your page.
  5. After some time the script is downloaded and subsequently executed.
  6. The parser continues parsing the rest of the HTML document.

Step 4 causes a bad user experience. Your website basically stops loading until you’ve downloaded all scripts. If there’s one thing that users hate it’s waiting for a website to load.

Why does this even happen?

Any script can insert its own HTML via document.write() or other DOM manipulations. This implies that the parser has to wait until the script has been downloaded & executed before it can safely parse the rest of the document. After all, the script could have inserted its own HTML in the document.

However, most javascript developers no longer manipulate the DOM while the document is loading. Instead, they wait until the document has been loaded before modifying it. For example:

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script type="text/javascript" src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">Welcome back, user</div>
    </body>
</html>

Javascript:

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

Because your browser does not know my-script.js isn’t going to modify the document until it has been downloaded & executed, the parser stops parsing.

Antiquated recommendation

The old approach to solving this problem was to put  tags at the bottom of your , because this ensures the parser isn’t blocked until the very end.

This approach has its own problem: the browser cannot start downloading the scripts until the entire document is parsed. For larger websites with large scripts & stylesheets, being able to download the script as soon as possible is very important for performance. If your website doesn’t load within 2 seconds, people will go to another website.

In an optimal solution, the browser would start downloading your scripts as soon as possible, while at the same time parsing the rest of your document.

The modern approach

Today, browsers support the async and defer attributes on scripts. These attributes tell the browser it’s safe to continue parsing while the scripts are being downloaded.

async

<script type="text/javascript" src="path/to/script1.js" async>
<script type="text/javascript" src="path/to/script2.js" async>

Scripts with the async attribute are executed asynchronously. This means the script is executed as soon as it’s downloaded, without blocking the browser in the meantime.
This implies that it’s possible to script 2 is downloaded & executed before script 1.

According to http://caniuse.com/#feat=script-async, 90% of all browsers support this.

defer

<script type="text/javascript" src="path/to/script1.js" defer>
<script type="text/javascript" src="path/to/script2.js" defer>

Scripts with the defer attribute are executed in order (i.e. first script 1, then script 2). This also does not block the browser.

Unlike async scripts, defer scripts are only executed after the entire document has been loaded.

According to http://caniuse.com/#feat=script-defer, 90% of all browsers support this. 92% support it at least partially.

An important note on browser compatibility: in some circumstances IE <= 9 may execute deferred scripts out of order. If you need to support those browsers, please read this first!

Conclusion

The current state-of-the-art is to put scripts in the <head> tag and use the async or deferattributes. This allows your scripts to be downloaded asap without blocking your browser.

The good thing is that your website should still load correctly on the 20% of browsers that do not support these attributes while speeding up the other 80%.

P.S. See also Google’s explanation: https://developers.google.com/speed/docs/insights/BlockingJS

shareedit

 

how to solve error “[$location:nobase] $location in HTML5 mode requires a tag to be present!”

[Origin]: https://stackoverflow.com/questions/40121747/how-to-solve-error-locationnobase-location-in-html5-mode-requires-a-base

I have no idea how to solve this case.

Error: [$location:nobase] $location in HTML5 mode requires a tag to be present!
http://errors.angularjs.org/1.5.7/$location/nobase at angular.js:68 at $LocationProvider.$get 
(angular.js:13384) at Object.invoke (angular.js:4709) at angular.js:4508 at getService 
(angular.js:4655) at injectionArgs (angular.js:4679) at Object.invoke (angular.js:4701) at 
angular.js:4508 at getService (angular.js:4655) at injectionArgs (angular.js:4679)

This happens when you have set html5mode, like so :

$locationProvider.html5Mode({
 enabled: true,
 requireBase: false
});

Just add a tag in your HTML template like so :

<head>
 <base href="/">
 ...
</head>

It’s exactly same thing mentioned in the docs here: https://docs.angularjs.org/error/$location/nobase

shareedit

Tech tip: How to do hard refresh in Chrome, Firefox and IE?

[Origin]: https://www.getfilecloud.com/blog/2015/03/tech-tip-how-to-do-hard-refresh-in-browsers/#.WguIZkqnGUl

Browser cache are useful for web browsing , but a real pain point for developers.

Modern day browsers nowadays cache every front end resource like javascript or CSS style sheets. They primarily do this to increase the website performance. But this can be really irritating while one is in development mode and constantly modifying the javascript or css style sheets. The only way to see the changes is by doing a hard refresh or clear the cache of the browser.

hard refresh is a way of clearing the browser’s cache for a specific page, to force it to load the most recent version of a page. Sometimes, when changes are made to the website, they don’t register immediately due to caching. A hard refresh will usually fix this, though occasionally completely clearing the cache is necessary.

How to do hard refresh on various browsers?

Chrome:

Quick hard refresh can be done by using the following short cut keys

Windows/Linux:

  1. Hold down Ctrl and click the Reload button.
  2. Or, Hold down Ctrl and press F5.
  3. just open the Chrome Dev Tools by pressing F12. Once the chrome dev tools are open, just right click on the refresh button and a menu will drop down. This menu gives you the option of doing a hard refresh, or even clearing the cache and do a hard refresh automatically.

Hardrefresh-chrome

Mac:

  1. Hold ⇧ Shift and click the Reload button.
  2. Or, hold down ⌘ Cmd and ⇧ Shift key and then press R.

 

Mozilla Firefox and Related Browsers:

Windows/Linux:

  1. Hold the Ctrl key and press the F5 key.
  2. Or, hold down Ctrl and ⇧ Shift and then press R.

Mac:

  1. Hold down the ⇧ Shift and click the Reload button.
  2. Or, hold down ⌘ Cmd and ⇧ Shift and then press R.

 

Internet Explorer:

  1. Hold the Ctrl key and press the F5 key.
  2. Or, hold the Ctrl key and click the Refresh button.

How in Chrome can you easily kill an infinite loop?

[Origin]: https://www.codeschool.com/discuss/t/how-in-chrome-can-you-easily-kill-an-infinite-loop/17580

This happens to me constantly. I’m checking out some code–sometimes stuff I’ve written frowning — and I freeze Chrome because the code has an unexpected infinite loop.

If it’s not chewing up too many resources, you can

  1. open up the devtools,
  2. click pause, which usually works,
  3. stop the code by changing it appropriately in the browser.

But that’s way too hard and time-consuming. There’s gotta be a stop-button type of way to do this.

Any ideas on how to better, more easily do this?

———————————————————-

Since Chrome uses individual tabs as processes, I just use Process Explorer (when I’m on Windows) to force end the browser tab with an infinite loop. It doesn’t close the browser and usually won’t affect any other tabs.

If you’d rather close the tab in native Chrome, you can use Shift+Esc to bring up the task manager (for Chrome) and end the tab there instead. I haven’t done this in a while, but it should still work.

Donovan