Access-Control-Allow-Origin 不允许来源 null

Question

I have made a small xslt file to create an html output called weather.xsl with code as follows:

<!-- DWXMLSource="http://weather.yahooapis.com/forecastrss?w=38325&u=c" -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
exclude-result-prefixes="yweather"
xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/">
    <img src="{/*/*/item/yweather:condition/@text}.jpg"/>
</xsl:template>
</xsl:stylesheet>

I want to load in the html output into a div in an html file which I'm trying to do using jQuery as follows:

<div id="result">
<script type="text/javascript">
$('#result').load('weather.xsl');
</script>
</div>

But I am getting the following error: Origin null is not allowed by Access-Control-Allow-Origin.

I've read about adding a header to the xslt, but I'm not sure how to do that, so any help would be appreciated, and if loading in the html ouput can't be done this way, then advice on how else to do it would be great.

Answer 1

Origin null<\/code> is the local file system, so that suggests that you're loading the HTML page that does the load<\/code> call via a file:\/\/\/<\/code> URL (eg, just double-clicking it in a local file browser or similar).

Answer 2

Chrome and Safari has a restriction on using ajax with local resources. That's why it's throwing an error like

Origin null is not allowed by Access-Control-Allow-Origin.

Solution: Use firefox or upload your data to a temporary server. If you still want to use Chrome, start it with the below option;

--allow-file-access-from-files

More info how to add the above parameter to your Chrome: Right click the Chrome icon on your task bar, right click the Google Chrome on the pop-up window and click properties and add the above parameter inside the Target textbox under Shortcut tab. It will like as below;

C:\Users\XXX_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

Hope this will help!

Answer 3

Just wanted to add that the "run a webserver" answer seems quite daunting, but if you have python on your system (installed by default at least on MacOS and any Linux distribution) it's as easy as:

python -m http.server  # with python3

or

python -m SimpleHTTPServer  # with python2

So if you have your html file myfile.html in a folder, say mydir , all you have to do is:

cd /path/to/mydir
python -m http.server  # or the python2 alternative above

Then point your browser to:

http://localhost:8000/myfile.html

And you are done! Works on all browsers , without disabling web security, allowing local files, or even restarting the browser with command line options.

Answer 4

I would like to humbly add that according to this SO source: https:\/\/stackoverflow.com\/a\/14671362\/1743693<\/a> , this kind of trouble is now partially<\/strong> solved simply by using the following jQuery instruction:

<script> 
    $.support.cors = true;
</script>

Answer 5

Adding a bit to use Gokhan's solution for using:

--allow-file-access-from-files

Answer 6

I was looking for an solution to make an XHR request to a server from a local html file and found a solution using Chrome and PHP. (no Jquery)

var x = new XMLHttpRequest(); 
if(x) x.onreadystatechange=function(){ 
    if (x.readyState === 4 && x.status===200){
        console.log(x.responseText); //Success
    }else{ 
        console.log(x); //Failed
    }
};
x.open(GET, 'http://example.com/', true);
x.withCredentials = true;
x.send();

Answer 7

You can load a local Javascript file (in the tree below your file:/ source page) using the source tag:

<script src="my_data.js"></script>

If you encode your input into Javascript, like in this case:

mydata.js :

$xsl_text = "<xsl:stylesheet version="1.0" + ....

(this is easier for json) then you have your 'data' in a Javascript global variable to use as you wish.

Answer 8

Using Java Spring to run a web service, you need to add: @ServletComponentScan right above @SpringBootApplication in your auto-generated YouAppApplication.java file ( the one with the main() function ) and create a class with the following implementation:

@WebFilter("/*")
public class AddResponseHeaderFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        // ...
    }

    @Override
    public void doFilter(ServletRequest servletRequest,
                         ServletResponse servletResponse,
                         FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse httpServletResponse = (HttpServletResponse) servletResponse;
        httpServletResponse.addHeader("Access-Control-Allow-Origin", "null");

        httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");
         filterChain.doFilter(servletRequest, servletResponse);

    }

    @Override
    public void destroy() {
        // ...
    }
}

note that you can choose a different name for this class as soon as it implements Filter and has the @WebFilter annotation you can also provide a different wildcard than /* so this filter doesn't apply to every endpoint.
As specified by @Louis Loudog Trottier you need to add ...withCredentials = true; when creating your Ajax request for this to work.