跨域问题

AJAX 教程 · 第 6 章 · 8 次浏览

浏览器安全策略规定:页面只能请求同源(同协议、同域名、同端口)的资源,跨域请求默认被拦截。这是防 CSRF 等攻击的保护,不是服务器不响应,而是浏览器拦了。

解决方案

  • CORS(推荐):服务器在响应头加 Access-Control-Allow-Origin,允许特定来源访问。后端配置一下就行
  • JSONP:老方法,只支持 GET,用 script 标签绕过限制,现在基本淘汰
  • 代理:开发时 Vite/Webpack 配 proxy,请求走本地服务转发
  • nginx 反向代理:部署时常见,前端同源访问,nginx 转发

CORS 具体响应头

Access-Control-Allow-Origin: *(或指定域名)、Access-Control-Allow-Methods、Access-Control-Allow-Headers。

代码示例

// 后端(PHP)允许跨域示例
// header("Access-Control-Allow-Origin: https://example.com");
// header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
// header("Access-Control-Allow-Headers: Content-Type");

// 前端 fetch 带 cookie 的跨域请求
fetch("https://api.other.com/data", {
    credentials: "include"    // 跨域也要带 Cookie
});

// Vite 开发代理配置
// server: {
//   proxy: {
//     "/api": "http://localhost:8080"
//   }
// }
📚 JavaScript 语法速查
常用条目速查,完整版见对应教程章节。可复制代码到在线运行中测试。
写法 / 语法作用
let x = 1;声明变量(可重新赋值)
const y = 2;声明常量(不可重新赋值)
var 已过时旧式变量声明,建议用 let/const
if (条件) { } else { }条件判断
for (let i = 0; i < n; i++) { }循环
while (条件) { }条件循环
function fn(a, b) { return a + b; }函数声明
const fn = (a) => a + 1;箭头函数
array.push(x) / pop()数组尾部添加 / 删除
array.map(fn) / filter(fn)数组映射 / 过滤
obj.key / obj["key"]访问对象属性
JSON.stringify(obj)对象转 JSON 字符串
JSON.parse(str)JSON 字符串转对象
document.getElementById("id")按 id 取元素
document.querySelector("选择器")按选择器取第一个元素
element.textContent读写元素文本
element.innerHTML读写元素 HTML(慎用,防 XSS)
element.addEventListener("click", fn)绑定事件
console.log(x)控制台输出(调试)
setTimeout(fn, 1000)延迟执行(毫秒)
window.location.href当前页面地址(可赋值跳转)
localStorage.setItem("k", v)本地存储写入
localStorage.getItem("k")本地存储读取
new Promise((resolve, reject) => {})Promise 异步处理
async / await异步函数语法糖