发表于: 2020-02-21 22:49:43

1 1549


今日完成

如何解决跨域问题?/如何设置Nginx反向代理?

任务5是采用Nginx反向代理来解决跨域问题的,方法是在配置文件里服务器处添加反向代理设置:
这样的话,URL带/carrots-admin-ajax/的请求会转发到目标服务器的IP去,比如Ajax里请求的地址/carrots-admin-ajax/a/login(完整的地址就是localhost/carrots-admin-ajax/a/login)会转发到http://dev.admin.carrots.ptteng.com/carrots-admin-ajax/a/login去请求数据。

[外链图片转存失败(img-BWEEs8K8-1568364248275)(https://cdn.yuque.com/yuque/0/2018/png/116709/1527155585507-74b959b9-df21-474b-af9a-20bfe4e74674.png “”)]

location /carrots-admin-ajax/{
        proxy_pass http://dev.admin.carrots.ptteng.com/;
        }
  • 1
  • 2
  • 3

参考:
用nginx的反向代理机制解决前端跨域问题 https://www.cnblogs.com/gabrielchen/p/5066120.html
NGINX Reverse Proxy https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/
远程服务器上nginx安转与基本操作(ip反向代理转发) https://blog.csdn.net/tengxing007/article/details/61615234

阻止表单默认提交事件

一开始的HTML结构如下:

<form class="login">
    <input placeholder="用户名" name="username" type="text">
    <input placeholder="密码" name="password" type="password">
    <p id="msg"></p>
    <button id="btn">登录</button></form>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

这时候点击登录按钮,会提交表单,以默认的get方式,可以在URL看到登录名和密码。
因为如果不规定button的type,会默认给一个submit的类型,button 类型常用于在用户点击按钮时启动 JavaScript 程序,而submit定义提交按钮,用于向服务器发送表单数据。
参考资料后最终通过js来阻止表单的默认提交。一开始确实写的是button的点击事件,不过考虑到无法回车触发事件(也可以写js),相比之下阻止表单默认提交更简洁。
用到的是preventDefault() 方法。

参考:
如何阻止表单的默认提交事件 https://blog.csdn.net/whd526/article/details/78178451
HTML 标签的 type 属性 http://www.w3school.com.cn/tags/att_input_type.asp
preventDefault() 方法 http://www.w3school.com.cn/jsref/event_preventdefault.asp

获取input的value值的方法

传统方法可以通过获取input元素,再获取value:

var aValue = document.getElementsByTagName('input');var name = aValue[0].value;var pwd = aValue[1].value;var data ="name="+name+"&pwd="+pwd;//以键值对的形式发给请求地址//中间省略oAjax.send(data);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

可以用XMLHttpRequest中的FormData对象提取当前页面表单的数据:

var oForm = document.getElementById('login');var data = new FormData(oForm); //比原来的方法简单很多,特别是在表单数据多的时候更简便//中间省略oAjax.send(data);



返回列表 返回列表
评论

    分享到