PhpStorm 配置服务器(server)详解

本文是结合官方的帮助文档与自己的实践所写。参考的文档链接如下:
Deploying PHP applications with PhpStorm
我所采用的服务器是Apache,实际上对所有服务器的操作是相同的。在具体的应用中,分为三种情况:

  1. 服务器安装在本地电脑上,我们项目的源文件位于服务器的跟文件目录下,也即 /htdocs 目录下。
  2. 服务器安装在本地电脑上,我们项目的源文件在电脑的其他文件夹下,项目文件需要传输到服务器的跟文件目录下进行验证。
  3. 服务器不在本地电脑上,我们项目源文件在本地电脑上,项目文件通过FTP, SFTP, FTPS或局域网等方式传输到服务器的跟文件目录下。

在本文后面我们将称之为:应用1,应用2,应用3

第一步

通过 Files|Settings|Deployment 打开下图所示的对话框。
这里写图片描述
点击绿色加号,将出现下面的对话框。
这里写图片描述
这里的名字可以随便起,比如我起名叫”Apache”,下面的”Type”选项的选取则是根据我们的应用类型,如果是应用1,则选取”In place”;如果是应用2,则选取”Local or mounted folder”;如果是应用3,根据自己的传文件方法进行选择。选择不同,后面出现的界面不同,当然下一步的界面中依然可以进行修改。

第二步

假如上一步的”Type”选择了”Local or mounted folder”,那么将有下面的对话框出现。
这里写图片描述
可以看到,有三个选项卡区域可以填写:”Connection”、”Mapping”、”Excluded Paths”。当选择的”Type”不同时,只有”Connection”部分会有不同,如果”Type”为”In place”,那么只有”Web server root URL”需要填写。“Web server root URL”,顾名思义,就是web服务器的根URL,如果我们在hosts文件中配置过服务器的域名,那么这里就可以写配置过的域名。
然后需要填写的是”Upload/download project files”部分,首先理解下Upload和Download的概念。

Upload is copying data from the project TO the server, either local or remote.
Download is copying data FROM the server to the project.

也就是说,由于我们选择的”Type”是”Local or mounted folder”(即应用2),项目文件需要传输到服务器根文件目录下,所以”Upload/download project files”要填的就是我们要把项目传输到哪个目录下,这里一般就填写服务器的 /htdocs 目录就好了。

第三步

上一步中我们已经填写完成”Connection”部分,接下来就是”Mapping”部分,如下图所示。
这里写图片描述
“Local path”:指的是我们项目的当前目录,会自动生成,不需我们填写。
“Deployment path on server ‘Apache’”:这里其实本质上就是要求指定一个更详细的”Upload/download project files”目录,一般跟项目文件同名的文件夹最方便。
“Web path on server ‘Apache’”:指的是首页 php/html文件的目录。
到这里配置工作就完成了。

第四步

现在就可以像下图所示将项目upload到web服务器上了,upload之后我们将会在服务器的指定的目录下看到跟当前项目一模一样的一份拷贝。
这里写图片描述

上述描述了PhpStorm配置web服务器的一个简单流程,还有很多的内容未提及,需参考文档。

### 解决Content Security Policy (CSP) img-src 'self' data: base64 错误 当遇到 `img-src` CSP 指令违反策略的问题时,通常是由于网页尝试加载不符合指定来源的图像资源引起的。以下是可能的原因以及解决方案: #### 原因分析 1. **CSP 策略定义不足** 当前 CSP 中设置了 `img-src 'self'`,这意味着只有来自同一源(即当前域名)的图片才能被加载。如果页面中有通过 `data:` 或者其他外部 URL 加载的图片,则会被阻止[^1]。 2. **Base64 图像嵌入问题** 使用 Base64 编码的内联图像是一种常见的优化手段,但如果未显式允许 `data:` 协议,在 CSP 下这些图像将无法正常显示。 3. **动态生成的内容冲突** 动态注入 HTML 内容可能导致意外行为,尤其是当内容中包含不受信任的数据时,这可能会触发 CSP 警告或错误。 --- #### 解决方案 ##### 方法一:扩展 `img-src` 定义范围 修改 `<meta>` 标签中的 CSP 策略以支持更多类型的图像来源。例如: ```html <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; img-src 'self' data:;"> ``` 上述配置表示除了允许同源的图片外,还允许基于 Base64 的编码图像加载。 ##### 方法二:调整服务器端响应头 如果 CSP 是由 HTTP 头部设置而非 `<meta>` 标签控制,则需更新 Web 服务器配置文件。对于 Nginx 和 Apache 分别有以下示例: - **Nginx** ```nginx add_header Content-Security-Policy "default-src 'self'; script-src 'self'; img-src 'self' data;"; ``` - **Apache** ```apache Header set Content-Security-Policy "default-src 'self'; script-src 'self'; img-src 'self' data;" ``` 以上更改确保浏览器能够识别并接受 Base64 数据作为合法的图像来源[^1]。 ##### 方法三:移除违规代码片段 检查前端代码是否存在非法调用第三方资源的情况。比如某些框架库自动插入了跨域请求或者使用了未经许可的协议加载媒体资产。清理掉不必要的部分有助于减少潜在风险。 ##### 方法四:启用报告机制捕获异常事件 为了更好地监控实际运行状况,建议开启 CSP Reports 功能收集反馈日志以便后续改进措施制定。 ```html <meta http-equiv="Content-Security-Policy" content="... report-uri /csp-report-endpoint"> ``` 此操作会把每次发生的违禁访问记录提交至指定 URI 地址供管理员审查处理。 --- ### 示例代码展示 下面给出一段简单的 PHP 页面演示如何正确应用增强后的 CSP 设置防止类似问题再次发生。 ```php <?php header('Content-Security-Policy: default-src \'self\'; script-src \'self\'; img-src \'self\' data:'); ?> <!DOCTYPE html> <html lang="en"> <head> <title>CSP Example</title> </head> <body> <!-- 合法本地图片 --> <img src="/images/example.jpg"> <!-- 合法base64编码图片 --> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Embedded Image"> <h1>Secure Page Loaded Successfully!</h1> </body> </html> ``` ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值