有关跨域的问题
发布于 8 年前 作者 hezhongfeng 5897 次浏览 来自 问答

这个是放在GitHub pages上的，在Vue组件中，应该是跨域了，但是为什么直接使用axios就能得到结果呢？ 跨域一般涉及CORS或者JSONP，我这什么都没做，感觉很奇怪

axios.get('https://cnodejs.org/api/v1/topics').then(function (response) {
tt.topics = response.data.data;
console.log(tt.topics);
})
.catch(function (error) {
console.log(error);
});
9 回复

CORS 是服务端设置的，客户端基本不用做什么。你不信自己看看 https://cnodejs.org/api/v1/topics 这个请求的 Response，其中设置了 Access-Control-Allow-Origin:* 这就意味着所有的源地址的跨域请求都是被允许的。

@Keifergu 但是跨域不是浏览器的阻拦吗？

@hezhongfeng 不是的，只要服务器设置了允许跨域的请求，浏览器自然不会阻止

来自酷炫的 CNodeMD

@cctv1005s 我看到的解释都是浏览器断的限制

浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.

我一直认为是浏览器端的同源策略限制了跨域访问

是浏览器限制没错，但浏览器在发送请求之前都会偷偷的读一下头文件，浏览器叫这个叫预读，再是否能发送请求，这张图应该很好说明 图片来源： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS prelight.jpg

@zy445566 恩，我的意思是我这个明明是跨域的请求，怎么就成功了呢~ 下面这个axios的关于跨域的说明，默认应该是关闭的~

  // `withCredentials` indicates whether or not cross-site Access-Control requests
  // should be made using credentials
  withCredentials: false, // default

image.png

简单的说，浏览器只是一个裁判，服务端返回的 Headers 里面会有 Access-Control-Allow-Origin 等信息，声明自己允许访问的来源，然后浏览器作为仲裁者，来放行或阻断。

而 cnode 的配置是允许所有来源访问， Access-Control-Allow-Origin: *

@atian25 @zy445566 get ，谢谢 刚才看了ruanyf的博客和你们的回答才知道咋回事 应该是浏览器允许发出跨域请求（原本以为浏览器直接限制了，不让发），然后服务器会把特殊信息Access-Control-Allow-Origin等附在headers上，再然后浏览器根据这些信息进行放行或阻断 我原本的理解误区是我以为在发出请求的时候禁止，事实应该是在服务器返回信息的时候进行判断，谢谢。

Access-Control-Allow-Origin →*
Connection →keep-alive
Content-Encoding →gzip
Content-Type →application/json; charset=utf-8
Date →Tue, 09 May 2017 01:15:09 GMT
ETag →W/"1f864-5ibvoPJVvi4bnv5weiEDzA"
Server →nginx/1.4.6 (Ubuntu)
Strict-Transport-Security →max-age=15768000
Transfer-Encoding →chunked
Vary →Accept-Encoding
X-Frame-Options →SAMEORIGIN
X-Powered-By →Express
X-Response-Time →87.804ms
回到顶部