今日完成

如何解决跨域问题？/如何设置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);