跨域请求问题
- 问题描述:当前端应用和后端 API 不在同一个域下时,浏览器会阻止跨域请求2。
- 解决方案7
- 使用 JSONP:利用
<script>标签的开放策略实现跨域请求。适用于所有浏览器,尤其是 IE10 及以下浏览器,但只支持 GET 请求,无法拿到相关的返回头、状态码等数据。代码示例如下:
- 使用 JSONP:利用
javascript
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参callback给后端,后端返回时执行这个在前端定义的回调函数
script.src = 'http://a.qq.com/index.php?callback=handleCallback';
document.head.appendChild(script);
// 回调执行函数
function handleCallback(res) {
alert(JSON.stringify(res));
}
![]()
- 配置 CORS:服务器配置
Access - Control - Allow - Origin等相关头信息,允许特定域下的跨域请求。支持所有类型的 HTTP 请求,功能完善,但 IE8 和 IE9 需要使用XDomainRequest对象进行兼容,IE7 及以下浏览器不支持。简单请求代码示例如下:
javascript
// IE8/9需用XDomainRequest兼容
var xhr = new XMLHttpRequest();
// 前端设置是否带cookie
xhr.withCredentials = true;
xhr.open('post', 'http://a.qq.com/index.php', true);
xhr.setRequestHeader('Content - Type', 'application/x - www - form - urlencoded');
xhr.send('user=saramliu');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
性能优化问题
- 问题描述:网页性能关乎用户体验,高并发访问、大量数据处理和复杂的业务逻辑等都可能导致性能下降12。
- 解决方案8
- 图片优化:通过压缩图片、选择合适的图片格式、使用 CSS Sprite 技术等减小图片大小,减少 HTTP 请求次数。如使用 Go 语言压缩图片的示例:
go
package main
import (
"fmt"
"image/jpeg"
"os"
"gopkg.in/nfnt/resize.v1"
)
func main() {
file, err := os.Open("image.jpg")
if err != nil {
fmt.Println(err)
return
}
defer file.Close()
img, err := jpeg.Decode(file)
if err != nil {
fmt.Println(err)
return
}
// 压缩图片,将宽度调整为1000,高度按比例缩放
m := resize.Resize(1000, 0, img, resize.Lanczos3)
out, err := os.Create("resized.jpg")
if err != nil {
fmt.Println(err)
return
}
defer out.Close()
// 将压缩后的图像保存为新文件
jpeg.Encode(out, m, nil)
}
- 前端资源优化:合并和压缩 CSS、JavaScript 文件,使用 CDN 加速,延迟加载 JavaScript 文件等。例如,将多个 CSS 文件合并成一个文件,并进行压缩,可以减小文件大小,加快文件加载速度。
安全性问题
- 问题描述:Web 应用面临多种安全威胁,如 SQL 注入、XSS 攻击、数据泄露等2。
- 解决方案9
- 防止 SQL 注入:使用参数化查询或预处理语句,验证用户输入并转义潜在的恶意字符。以 PHP 为例,代码示例如下:
php
function register() {
$stmt = $this->connection->prepare('INSERT INTO users (username, email, password) VALUES (?, ?, ?)');
$stmt->bind_param('sss', $this->username, $this->email, $this->password);
$stmt->execute();
$stmt->close();
}
- 防范 XSS 攻击:转义 HTML 输出,实施内容安全策略,启用
X - XSS - Protection头。例如,在 PHP 中输出用户输入之前转义 HTML:
php
function displayUsername() {
echo htmlspecialchars($this->username);
}
8万+

被折叠的 条评论
为什么被折叠?



