开发过程中印象最深刻的Bug

  • 在工作中遇到各种各样的bug。但是参加工作第一天起,第一次所遇到的bug是一个跨域的问题。

对跨域的这个问题,首先需要了解什么是跨域。大体可以分为三类,协议不同,域名不同,端口不同。

浏览器的同源策略是确保浏览器安全的特别重要的一个安全策略,如果没有同源策略:在一个域上加载的脚本不允许访问另一个域上文本属性 不然通过内嵌 iframe 恶意添加 javaScript 脚本就可以轻松获取到用户信息

何为同源:url 是由协议、域名、端口和路径组成 如果两个路径的协议、域名、端口都相同则表示再同一个域上

在浏览器上

理解了跨域原理,在说说日常项目中,解决跨域的方案

1.JSON跨域

 jsonp的原理就是利用

(1) jquery Ajax实现:

 $.ajax({
   url: 'http://localhost:8080/login',
   type: 'get',
   dataType: 'jsonp',  // 请求方式为jsonp
   data: {}
 });

2.Vue跨域处理

  • 利用http-proxy-middleware 代理解决
devServer:{
    proxy:{
       "/api":{
             target:"http://localhost:8080" //数据接口的地址 
             changeOrigin:true,  // 允许跨域 
             secure:false, // 允许运行在https上   
             pathRewrite: { //如果你不想总是传递 /api,可以重写路径
                  '^/api': ''
             }   
        } 
    }
  1. 后端使用cors解决跨域问题,这里采用node + express实现

首先安装 npm install cors -S

然后在app.js直接使用即可

app.use(require('cors')())

4.nginx代理跨域

nginx代理跨域,实质和CORS跨域原理一样,通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。

通过Nginx配置一个代理服务器域名与aaa相同,端口不同)做跳板机,反向代理访问aaa2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域访问

#proxy服务器
server {
    listen       80;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://aaa.com;  #反向代理
        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;
    }
}

以上就是解决跨域最常用见的方法

上一篇:Java NIO实战之聊天室


下一篇:nginx服务器搭建以及配置