一、跨域

1. 什么是跨域?

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制(指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的)

例如:a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。理解这一点很重要!!!

广义的跨域:

1.) 资源跳转:A链接、重定向、表单提交

2.) 资源嵌入:<link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链

3.) 脚本请求:js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。

2. 什么是同源策略?

源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同(其中有一个不同都会产生跨域),即便两个不同的域名指向同一个ip地址,也非同源。

同源策略限制以下几种行为:

1.) Cookie、LocalStorage 和 IndexDB 无法读取

2.) DOM 和 Js对象无法获得

3.) AJAX 请求不能发送

3. 常见跨域场景

3.跨域访问示例

假设有两个网站,A网站部署在:http://localhost:81 即本地ip端口81上;

B网站部署在:http://localhost:82 即本地ip端口82上。

现在A网站的页面想去访问B网站的信息,A网站页面的代码如下(这里使用jquery的异步请求)

$(function (){

$.get("http://localhost:82/api/values", {},function (result) {

$("#show").html(result);

})});

 

从错误信息可以看出以上出现了跨域问题!

4. 跨域解决方案

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

5. nginx跨域解决方案

方案一:

先上图:

首先我们用nginx作为代理服务器和用户交互,这样用户就只需要在80端口上进行交互就可以了,这样就避免了跨域问题,因为我们都是在80端口上进行交互的;

下面我们看一下利用nginx作为反向代理的具体配置:

server {

listen      80; #监听80端口,可以改成其他端口

server_name  localhost; # 当前服务的域名

#charset koi8-r;

#access_log  logs/host.access.log  main;

location / {

proxy_pass http://localhost:81;

proxy_redirect default;

}

location /apis { #添加访问目录为/apis的代理配置

rewrite  ^/apis/(.*)$ /$1 break;

proxy_pass  http://localhost:82;

}

#以下配置省略

1.当用户发送localhost:80/时会被nginx转发到http://localhost:81服务;

2.当界面请求接口数据时,只要以/apis 为开头,就会被nginx转发到后端接口服务器上;

总结:nginx实现跨域的原理,实际就是把web项目和后端接口项目放到一个域中,这样就不存在跨域问题,然后根据请求地址去请求不同服务器(真正干活的服务器);

方案二:

(1)nginx配置解决iconfont跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置。

location /{

add_header Access-Control-Allow-Origin *;

}

(2) nginx反向代理接口跨域

跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。

实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。

nginx具体配置:

#proxy服务器

server {

    listen 81;    

    server_name  www.domain1.com;

   location / {        
proxy_pass http://www.domain2.com:8080; #反向代理

proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名

index index.html index.htm;


# 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时,可为*

add_header Access-Control-Allow-Credentials true;

  }
}

1.) 前端代码示例:

var xhr = new XMLHttpRequest(); 
// 前端开关:浏览器是否读写
cookie
xhr.withCredentials = true;
// 访问nginx中的代理服务器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();

2.) Nodejs后台示例:

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
var params = qs.parse(req.url.substring(2));
// 向前台写cookie
res.writeHead(200, {
'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'
// HttpOnly:脚本无法读取
});

res.write(JSON.stringify(params));
res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

二、Https配置

HTTPS是一种通过计算机网络进行安全通信的传输协议,经由HTTP进行通信,利用SSL/TLS建立全信道,加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证,同时保护交换数据的隐私与完整性。

PS:TLS是传输层加密协议,前身是SSL协议,由网景公司1995年发布,有时候两者不区分。

ca是ssl证书的签发机构

ssl证书可以购买阿里云免费证书

https://yundunnext.console.al...

下载nginx版证书,添加到服务器中,

配置nginx:

同时监听80和443端口,当使用http访问自动跳转到https,根据if($schema ==hhtp)完成

ssl_certificate配置证书路径

ssl_certificate_key 配置key路径

保存,重启nginx。

启动发现访问 ailijie.top成功跳转为 https://ailijie.top

使用https后站点内所有的请求都要使用https不然会被浏览器进行拦截。

Nginx跨域及Https配置的更多相关文章

  1. Nginx跨域访问场景配置和防盗链

    跨域访问控制 跨域访问 为什么浏览器禁止跨域访问 不安全,容易出现CSRF攻击! 如果黑客控制的网站B在响应头里添加了让客户端去访问网站A的恶意信息,就会出现CSRF攻击 Nginx如何配置跨域访问 ...

  2. 014.Nginx跨域配置

    一 跨域概述 1.1 同源策略 同源策略是一个安全策略.同源,指的是协议,域名,端口相同.浏览器处于安全方面的考虑,只允许本域名下的接口交互,不同源的客户端脚本,在没有明确授权的情况下,不能读写对方的 ...

  3. 跨域原因及SpringBoot、Nginx跨域配置

    目录 概述 简单请求 跨域解决方案 概述 SpringBoot跨域配置 Nginx跨域配置 概述 MDN文档 Cross-Origin Resource Sharing (CORS) 跨域的英文是Cr ...

  4. spring boot跨域请求访问配置以及spring security中配置失效的原理解析

    一.同源策略 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[orig ...

  5. Nginx跨域了解及模拟和解决

    Nginx跨域 同源策略 何为同源: 1.协议(http/https)相同 2.域名(IP)相同 3.端口相同 详解请看我另一篇文章 https://www.cnblogs.com/you-men/p ...

  6. nginx跨域的简单应用

    nginx跨域的简单应用 要求:1.浏览器访问print.qianbaihe.wang/zt 直接调转至 www.flybirdprint.com/zt,浏览器显示域名不变. server { lis ...

  7. vue-cli 3.0之跨域请求代理配置及axios路径配置

    vue-cli 3.0之跨域请求代理配置及axios路径配置 问题:在前后端分离的跨域请求中,报跨域问题 配置: vue.config.js: module.exports = { runtimeCo ...

  8. 谷歌浏览器和火狐浏览器设置跨域和https、http混用 Chrome

    谷歌浏览器和火狐浏览器设置跨域和https.http混用 Chrome    添加启动项: 右键点击Chrome快捷方式,在目标一栏后添加启动项 允许跨域: --disable-web-securit ...

  9. nginx 跨域请求访问

    1.nginx跨域请求访问 location ~ .*\.(htm|html)$ { add_header Access-Control-Allow-Origin(请求域名) *(所有域名) http ...

随机推荐

  1. Codeforces 832D(Misha, Grisha and Underground,LCA)

    题意:在一棵生成树上,给出了三个点,求三个点之间最大的相交点数,CF难度1900. 题解:求出三个lca,并取深度最大的那个,就是我们要的三岔路口K,然后分别求出K到a,b,c三点的路径长度,取最大值 ...

  2. JS 面向对象封装 无限轮播 插件。

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. LinkedList源码(add方法)

    对于要有扎实的java基础,集合是必须掌握的,而且精读这部分的源码很有用,也很有必要.而LinkedList是在java.util包下,和java.io,java.lang都是比较常用,而且比较简单. ...

  4. git的日常使用

    首次上传项目到github上 在项目上右击——>选择  Git Bash Here  直接进入到存放项目文件的地址 git init     在当前项目的目录中生成本地的git管理 git ad ...

  5. 视口viewport

    一.viewport 1. 何为视口? 视口是浏览器显示网页的矩形区域. 2. 默认视口:模拟一个大约1000像素宽的视口. 理想视口:因设备.操作系统.浏览器而异,一般而言,手机宽带大约在300-5 ...

  6. interface和abstract 的区别和相同点

    在Java语言中,abstract class和interface是支持抽象类定义的两种机制. 不能创建abstract类的实例,然而可以创建一个变量,其类型是一个抽象类,并让它指向具体子类的一个实例 ...

  7. 系列13 docker asp.net core部署

    一.介绍   本篇完整介绍asp.net core web api如何部署到docker容器中,并通过外部访问web api服务.在编写完成dockerfile之后,可以通过docker [image ...

  8. xctf-misc 新手区 wp

    目录 this_is_flag pdf SimpalRAR ext3 stegano this_is_flag Most flags are in the form flag{xxx}, for ex ...

  9. mysql 优化(包含sql语句的书写)

    http://blog.chinaunix.net/uid-11640640-id-3426908.html  mysql性能优化-慢查询分析.优化索引和配置 2012-11-30 15:18:42 ...

  10. 实验十四 Swing图形界面组件

    实验十四  Swing图形界面组件 实验时间 20178-11-29 1.实验目的与要求 (1) 掌握GUI布局管理器用法: (2) 掌握各类Java Swing组件用途及常用API: 2.实验内容和 ...