发表于: 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);
评论