nginx 跨域 --学习简单小记

目录

• 跨域 之nginx
  • 概述
  • 什么是跨域？
  • 什么是同源？
  • 如何解决跨域问题？
    • 使用CORS (跨资源共享)解决跨域问题 --难在服务器端不好改代码(自己服务器可采用此方法)
    • 使用JSONP解决跨域问题 --只支持get
    • CORS与JSONP的比较
    • 使用Nginx反向代理解决跨域问题 --（跨b站，百度别人的服务器用nginx）

跨域 之nginx

概述

在浏览器端进行 Ajax 请求时会出现跨域问题，那么什么是跨域，如何解决跨域呢？先看浏览器端出现跨域问题的现象，如下图所示

{{uploading-image-303367.png(uploading...)}}

什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

什么是同源？

所谓同源是指，域名，协议，端口均相同
http://www.funtl.com --> http://admin.funtl.com 跨域
http://www.funtl.com --> http://www.funtl.com 非跨域
http://www.funtl.com --> http://www.funtl.com:8080 跨域
http://www.funtl.com --> https://www.funtl.com 跨域

如何解决跨域问题？

使用CORS (跨资源共享)解决跨域问题 --难在服务器端不好改代码(自己服务器可采用此方法)

CORS是个W3C标准，全称是"跨域资源共享”(Cross origin resource sharing)。它允许浏览器向跨源服务器，发出XMLHtpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AIAX通信没有差别，代码完全一样。浏览器旦发现AIAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关化是服务器。只要服务器实现了CORS接口，就可以跨源通信(在header中设置: Access-ControlAllow-0rigin )

使用JSONP解决跨域问题 --只支持get

JSONP (JSON with Padding)是JSON的一种“使用模式”， 可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1. example.com的网页无法与server2.example.com 的服务器沟通，而HTML的