网站开发常见问题与实战解决方案（附代码示例）

跨域请求问题

问题描述：当前端应用和后端 API 不在同一个域下时，浏览器会阻止跨域请求2。
解决方案7
- 使用 JSONP：利用<script>标签的开放策略实现跨域请求。适用于所有浏览器，尤其是 IE10 及以下浏览器，但只支持 GET 请求，无法拿到相关的返回头、状态码等数据。代码示例如下：

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 语言压缩图片的示例：

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);
}