浏览器没有设置跨起源请求起源头？

问题描述 投票：0回答：2

我有一个简单index.html文件。这个网站是从localhost:3000加载

<body>
    <h1>Some app</h1>
    <script src="http://localhost:3005/script.js"></script>
</body>

该script.js设置从另一个初始装载：localhost:3005。

从我的理解，浏览器应该拦截请求和起源头添加到它 - 做一个预检要求localhost:3005服务器，以检查是否localhost:3000是允许的。

但我没有得到origin。浏览器似乎不添加起源头。这是负责提供script.js文件（localhost:3005）服务器。我使用的是cors module。

const app = express()

const whitelist = ["http://localhost:3001"]
const corsOptions = {
    origin: function(origin, callback) {
        console.log("origin is: ", origin);      //undefined -- why is undefined??

        if (whitelist.indexOf(origin) !== -1) {
            callback(null, true)
        }
        else {
            callback(new Error('Not allowed by CORS'))
        }
    }
}

app.use(cors(corsOptions), express.static(__dirname))
app.listen(3005, () => {
    console.log("server listening on port 3005")
})

我的实际目标是到白名单只qazxsw POI索要我qazxsw POI

我把localhost:3000只是为了测试，如果我真的开始一个CORS错误 - 因为它应该是。

但是我还没有得到原点 - 是什么原因造成的？我得到两个Firefox和Chrome相同的行为。难道我误解了这个漏洞的过程？谢谢 ：）

编辑：也许看到请求帮助

script.js

cors cross-domain same-origin-policy allow-same-origin
2个回答
2
投票

我想你可能会误解CORS的目的。它给服务器选择在对某些类型的请求，否则将浏览器的同源策略下被禁止的能力。它不提供一种机制来禁止以前允许的请求。

从在localhost:3001标签的browser doesn't attach the origin header外国血统执行脚本一直在同源策略允许的，所以根本CORS不适用。这就是为什么有对请求没有头。

我的实际目标是到白名单只qazxsw POI索要我qazxsw POI。

您不能使用CORS了点。事实上，你可能无法做到这一点的。我会退后一步，问你为什么要那样做。如果你想确保随后的私人数据某种形式的认证机制（令牌，饼干什么的）可能是必要的。

1
投票

对于其他人谁可能会遇到这个问题，这里是凯文·克里斯托弗·亨利的上述接受的答案的实际演示。

下面这第一个代码段从域中src请求脚本（与src网址.js文件）（并自动执行得它在请求的成功，但在这里，这并不重要）。两件事情，这里要注意：

  1. 这对于一个脚本请求被比在那里的源自不同的域（www.w3schools.com）制成。
  2. 这种成功运行。

<script>
localhost:3000

下面该第二代码段请求一个URL（script.js）到一个特定的路径/页使用XHR域www.w3schools.com。这是发出请求API端点时，你会用什么。这是CORS具有管辖权。两件事情，这里要注意：

  1. 这个请求被比在那里的源自不同的域（www.w3schools.com）制成。
  2. 失败的原因是现代浏览器默认情况下限制跨域的HTTP请求（$.ajax({ url: 'https://www.w3schools.com/lib/w3codecolor.js', dataType: "script", success: function(data, status) { console.log('Result:', status) }, error: function(err, status) { console.log('Error:', error); }, });）。现在解决这个问题的唯一途径是通过www.w3schools.com域配置CORS从外面自己的域接受XHR请求。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
https://www.w3schools.com/bootstrap

这里的错误是不明确的。看到实际CORS错误，开放的Web开发者控制台，您应该看到类似

www.w3schools.com

现在为什么错误说“从原点‘零’”的原因就是它甚至没有设置请求头see more为“$.ajax({ url: 'https://www.w3schools.com/bootstrap', success: function(data, status) { console.log('Result:', status) }, error: function(err, status) { console.log('Error:', err); }, });”，因为这些代码片段可能被从沙盒环境中运行。

然而，其结果将是，如果<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>实际上是设置为“"Access to XMLHttpRequest at 'https://www.w3schools.com/bootstrap' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." ”一样。随意复制上面的脚本粘贴到网页开发者控制台，并尝试一下。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.