Html allow cross origin

How do I use Access-Control-Allow-Origin? Does it just go in between the html head tags?

I’ve been reading about Access-Control-Allow-Origin because it seems effective at allowing cross domain requests since I have access to the external site. My question ism how do I use Access-Control-Allow-Origin to allow cross domain requests. I tried this (don’t laugh) (by the way all I want is for a single number, 1 or 0 to be returned)

  Access-Control-Allow-Origin: * 1  

Am I close? Thanks for your help. If there is an easier way to do a simple cross-domain request let me know.

6 Answers 6

There are 3 ways to allow cross domain origin (excluding jsonp ):

1. Set the header in the page directly using a templating language like PHP. Keep in mind there can be no HTML before your header or it will fail.
2. Modify the server configuration file ( apache.conf ) and add this line. Note that «*» represents allow all. Some systems might also need the credential set. In general allow all access is a security risk and should be avoided: Header set Access-Control-Allow-Origin «*» Header set Access-Control-Allow-Credentials true
3. To allow multiple domains on Apache web servers add the following to your config file SetEnvIf Origin «http(s)?://(www\.)?(example.org|example.com)$» AccessControlAllowOrigin=$0$1 Header add Access-Control-Allow-Origin %e env=AccessControlAllowOrigin Header set Access-Control-Allow-Credentials true
4. For development use only hack your browser and allow unlimited CORS using the Chrome Allow-Control-Allow-Origin extension
5. Disable CORS in Chrome: Quit Chrome completely. Open a terminal and execute the following. Just be cautious you are disabling web security: open -a Google\ Chrome —args —disable-web-security —user-data-dir

The easiest way to inadvertently create code that works in test but mysteriously fails in production is to add the extension. 😉

Could you provide please an example on how to use this extension? I don’t get it to work and there doesn’t seem to be any docs. Although I’ve set up the remote address in the «Intercepted URLs or URL patterns» setting, I’m still seeing messages through Dev Tools explaining that access has been blocked due to CORS. And there is an «Access-Control-Expose-Headers» setting I don’t know what is for. I don’t know if it’s my fault or if the extensions is not working anymore.

That is an HTTP header. You would configure your webserver or webapp to send this header ideally. Perhaps in htaccess or PHP.

Alternatively you might be able to use

I do not know if that would work. Not all HTTP headers can be configured directly in the HTML.

This works as an alternative to many HTTP headers, but see @EricLaw’s comment below. This particular header is different.

This answer is strictly about how to set headers. I do not know anything about allowing cross domain requests.

About HTTP Headers

Every request and response has headers. The browser sends this to the webserver

Host: www.example.com User-Agent: (Browser/OS name and version information) .. Additional headers indicating supported compression types and content types and other info 

Then the server sends a response

Content-type: text/html Content-length: (number of bytes in file (optional)) Date: (server clock) Server: (Webserver name and version information) 

Additional headers can be configured for example Cache-Control , it all depends on your language (PHP, CGI, Java, htaccess) and webserver (Apache, etc).

How can this be occomplished with html and javascript. I have an html page calling another html page via javaascript. I am not using any server side scripts which can modify the headers.

This command disables only first console warning info

If you are using npm and want to load some files/folders allowing cross origin resource sharing(CORS) try the following, install the http-server:

Go to your files/folders folder and run the command below to make your files/folders available at http://127.0.0.1:8080 . This a good choice when you want to keep the files in a safe place and control who can request inferences to it. The -c1 parameter is added to disable caching, and the —cors flag enables cross origin resource sharing(CORS) allowing the hosted files to be used by the client side JavaScript for a given domain.

It worked for me in WSL-ubuntu terminal on windows 10. It should work with npm CLI on any OS.

Источник

Access-Control-Allow-Origin

The Access-Control-Allow-Origin response header indicates whether the response can be shared with requesting code from the given origin.

Syntax

Access-Control-Allow-Origin: * Access-Control-Allow-Origin: Access-Control-Allow-Origin: null 

Directives

For requests without credentials, the literal value » * » can be specified as a wildcard; the value tells browsers to allow requesting code from any origin to access the resource. Attempting to use the wildcard with credentials results in an error.

Specifies an origin. Only a single origin can be specified. If the server supports clients from multiple origins, it must return the origin for the specific client making the request.

Specifies the origin «null».

Note: null should not be used: «It may seem safe to return Access-Control-Allow-Origin: «null» , but the serialization of the Origin of any resource that uses a non-hierarchical scheme (such as data: or file: ) and sandboxed documents is defined to be «null». Many User Agents will grant such documents access to a response with an Access-Control-Allow-Origin: «null» header, and any origin can create a hostile document with a «null» Origin. The «null» value for the ACAO header should therefore be avoided.»

Examples

A response that tells the browser to allow code from any origin to access a resource will include the following:

A response that tells the browser to allow requesting code from the origin https://developer.mozilla.org to access a resource will include the following:

Access-Control-Allow-Origin: https://developer.mozilla.org 

Limiting the possible Access-Control-Allow-Origin values to a set of allowed origins requires code on the server side to check the value of the Origin request header, compare that to a list of allowed origins, and then if the Origin value is in the list, set the Access-Control-Allow-Origin value to the same value as the Origin value.

CORS and caching

Suppose the server sends a response with an Access-Control-Allow-Origin value with an explicit origin (rather than the » * » wildcard). In that case, the response should also include a Vary response header with the value Origin — to indicate to browsers that server responses can differ based on the value of the Origin request header.

Access-Control-Allow-Origin: https://developer.mozilla.org Vary: Origin 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 10, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML attribute: crossorigin

The crossorigin attribute, valid on the , , , , and elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element’s fetched data. Depending on the element, the attribute can be a CORS settings attribute.

The crossorigin content attribute on media elements is a CORS settings attribute.

These attributes are enumerated, and have the following possible values:

Request uses CORS headers and credentials flag is set to ‘same-origin’ . There is no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication, unless destination is the same origin.

Request uses CORS headers, credentials flag is set to ‘include’ and user credentials are always included.

Setting the attribute name to an empty value, like crossorigin or crossorigin=»» , is the same as anonymous .

An invalid keyword and an empty string will be handled as the anonymous keyword.

By default (that is, when the attribute is not specified), CORS is not used at all. The user agent will not ask for permission for full access to the resource and in the case of a cross-origin request, certain limitations will be applied based on the type of element concerned:

Element	Restrictions
img , audio , video	When resource is placed in , element is marked as tainted.
script	Access to error logging via window.onerror will be limited.
link	Request with no appropriate crossorigin header may be discarded.

Note: The crossorigin attribute is not supported for rel=»icon» in Chromium-based browsers. See the open Chromium issue.

Example: crossorigin with the element

script src="https://example.com/example-framework.js" crossorigin="anonymous"> script> 

Example: Web manifest with credentials

The use-credentials value must be used when fetching a manifest that requires credentials, even if the file is from the same origin.

link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" /> 

Specifications

Browser compatibility

html.elements.img.crossorigin

BCD tables only load in the browser

html.elements.link.crossorigin

BCD tables only load in the browser

html.elements.script.crossorigin

BCD tables only load in the browser

html.elements.video.crossorigin

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник