How to enable CORS from .htaccess (inside ZURB Foundation Project)

问题

So this is the first time I build a website in Full and my own, including front-end, back-end and database. I'm using the ZURB Foundation Framework (ZURB Template) which makes the project modular using Webpack4, Babel7 and Gulp (Taskrunner).

Ive downloaded the latest portable XAMPP distribution for windows and run apache from it. So far, I definitely CAN get my backend to interact with my front-end. My apache is running on localhost:8099, I've set the Root to serve the respective directory containing my php files (and ONLY them) in my project: D:\foundationtests\src\assets\php. I also checked whether the headers_module in apache is there or not, by running

E:\xampp\apache\bin>httpd -M  

from cmd and it showed

headers_module (shared)

so it should be active.

I have the following jquery AJAX calling the backend:

function phpAJAX(){
  console.log("phpAJAX was called")
  $.get("http://localhost:8099/test.php", {

  }).then((response) => {
    console.log(response)
  })
}

And here is the called PHP file:

<?php
//header("Access-Control-Allow-Origin: *");
echo "Hello!";

?>

As you can see, I've commented the first line. When I uncomment this line, all works fine, the CORS is allowed and I get a response from the server logging to my browser console. So I could stop there and call it a day. But I want a cleaner solution, so I added an .htaccess file.

This file resides in the "root" directory of my sourcecode, see screenshot: https://imgur.com/l4xUThN

I followed the instructions from a thread on the official ZURB Foundation forum: https://foundation.zurb.com/forum/posts/37922-htaccess So far it seems to work, as you can see on the screenshot webpack copied my .htaccess to the distfolder as well. Since it resides at the root of the dist folder, its settings should affect ALL my sourcecode in the project.

But for some reason, NOTHING changes, I still get the error that the CORS couldnt be executed because it was blocked. I've tried numerous other configurations for my .htaccess, there are lots of threads on SO on this topic. But no matter what settings they suggested, the result always stayed the same.

Therefore I wonder whether my .htaccess file is recognized at all. I'm pretty new to all this, so I'm not sure whether I put the .htaccess in the right location or not. What am I missing?

EDIT: Here is a screenshot of the network monitor (browser console) for the respective request: https://imgur.com/fqowf1Y

回答1:

Add the following lines in .htaccess file to enable CORS. This will ensure these headers are always set:

Header add Access-Control-Allow-Origin: "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header add Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control"

Irrespective of how you are building your project ensure that .htaccess file is present at the root of the directory and has the above content included.

来源：https://stackoverflow.com/questions/57522627/how-to-enable-cors-from-htaccess-inside-zurb-foundation-project