如何获取跨源脚本的错误

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/02/03/%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96%E8%B7%A8%E6%BA%90%E8%84%9A%E6%9C%AC%E7%9A%84%E9%94%99%E8%AF%AF/

摘要

本文主要讲述了：

限制
解决方案

正文

限制

默认情况下，为了保护跨源脚本的隐私，window的error事件无法获取跨源脚本的错误

解决方案

在<script>引入 JavaScript 文件时，添加crossorigin特性
跨源脚本所在的服务器允许其他站点跨源请求对应脚本

示例：

nginx.conf

server {
    listen       80;
    server_name  a.example.com;
    location / {
        root   html/a.example.com;
        index  index.html index.htm;
    }
}

server {
    listen       80;
    server_name  b.example.com;
    location / {
        add_header Access-Control-Allow-Origin *;
        root   html/b.example.com;
        index  index.html index.htm;
    }
}

a.example.com/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script defer src="./js/index.js"></script>
    <script defer crossorigin src="//b.example.com/js/index.js"></script>
  </head>
  <body></body>
</html>

a.example.com/js/index.js

window.addEventListener(
  'error',
  function (event) {
    console.log(event); // 错误事件对象
    console.log(event.message); // 错误信息
    console.log(event.filename); // 错误的JavaScript文件的URL
    console.log(event.lineno); // 错误行数
    console.log(event.colno); // 错误列数
    console.log(event.error); // 错误对象
  },
  true
);