如何从.htaccess启用CORS（在ZURB Foundation项目内部） [英] How to enable CORS from .htaccess (inside ZURB Foundation Project)
问题描述
所以这是我第一次用Full和我自己的网站（包括前端，后端和数据库）构建网站。
我正在使用ZURB基础框架（ZURB模板），该框架使用Webpack4，Babel7和Gulp（Taskrunner）使项目模块化。
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).
我已经下载了适用于Windows的最新便携式XAMPP发行版，并从中运行了Apache。
到目前为止，我绝对可以让我的后端与我的前端进行交互。
我的apache在localhost：8099上运行，我已将Root设置为在项目中提供包含我的php文件（以及仅它们）的相应目录：
D：＼ ＼Foundationtests\src\assets\php 。
我还通过运行
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
from cmd and it showed
headers_module (shared)
so
我有以下jquery AJAX调用后端：
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)
})
}
这是被调用的PHP文件：
And here is the called PHP file:
<?php
//header("Access-Control-Allow-Origin: *");
echo "Hello!";
?>
如您所见，我评论了第一行。当我取消注释此行时，一切正常，允许CORS，并且我从服务器登录到浏览器控制台时得到响应。
所以我可以停在那里并称其为一天。
但是我想要一个更干净的解决方案，所以我添加了一个.htaccess文件。
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.
此文件位于我的源代码的根目录中，请参见屏幕截图：
https://imgur.com/l4xUThN
This file resides in the "root" directory of my sourcecode, see screenshot: https://imgur.com/l4xUThN
我按照官方ZURB Foundation论坛上的主题进行了操作：< a href = https://foundation.zurb.com/forum/posts/37922-htaccess rel = nofollow noreferrer> https://foundation.zurb.com/forum/posts/37922-htaccess
到目前为止，它似乎仍然有效，正如您在屏幕快照中看到的webpack一样，我也将.htaccess复制到了分散器中。
由于它位于dist文件夹的根目录下，因此其设置应影响项目中所有我的源代码。
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.
但是由于某些原因，什么都没改变，我仍然收到错误消息，因为CORS被阻止了，因此无法执行。
我为.htaccess尝试了许多其他配置，因此有很多关于该主题的主题。但是无论他们建议什么设置，结果始终保持不变。
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.
因此，我想知道我的.htaccess文件是否能被识别。我对这一切还很陌生，因此不确定是否将.htaccess放在正确的位置。我缺少什么？
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?
编辑：
这是相应请求的网络监视器（浏览器控制台）的屏幕截图： https://imgur.com/fqowf1Y
推荐答案
在 .htaccess 文件中添加以下行以启用CORS。这将确保始终设置以下标头：
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"
无论您如何构建项目时，请确保目录的根目录中存在 .htaccess 文件，并且其中包含上述内容。
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.
这篇关于如何从.htaccess启用CORS（在ZURB Foundation项目内部）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
