前言
之前心血来潮，感觉自己算法能力特别垃圾，马上打开 LeetCode 去刷了一个周。后来发现，只去做不行，还要定期去总结。所以就想把总结的结果发布成博文。发布到哪个平台呢？CSDN 还是博客园？知乎还是简书？算了，要不然自己写一个博客系统吧。所以又心血来潮，打算搞一个自己的博客系统，放到机器上跑。其实挺久之前，就对前端比较感兴趣，但无奈一直没有系统学习，也没有时间经验，所以前端打算用Vue实现，前后端分离去做，后端用 SpringCloud 去搞，边搞边学习，在实践中遇到问题，在问题中进行学习。
说搞就搞，前后端搭起框架，后端简单接口写好，前端项目 init 完成，前后端打个招呼吧，这时候发现：前端向后端发请求的时候出现了跨域。前端发布在 localhost:8080 上，后端发布在 localhost:9090 上，端口不同，可不就是跨域么。
跨域的概念
跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。
前端代码：
export default {
data() {
return {
username: "",
password: ""
};
},
methods: {
login() {
http
.post("http://localhost:9090/test/redis", {"ids":"ok"})
.then(data => {
console.log("res: ", data);
})
.catch(err => console.log(err));
}
}
};
此时浏览器报出异常：
也就是说，当前后端不在同一个域中，无法直接发送请求。前言中所说的场景是因为端口不同导致的跨域。
如何解决
目前的问题是在跨域，在网上找了一下解决方案：
- jsop
- nginx实现代理
jsonp 只能用于get请求，后来就研究了一下 nginx 实现，实践了一下，发现是可行的，在这里记录一下当时实践的过程和原理。
Nginx实现跨域
代码设置
nginx.conf 进行前后端应用的配置
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://localhost:8080; #设置前端请求代理url
}
location /api/ { #添加访问目录为/api的代理配置
rewrite ^/api/(.*)$ /$1 break; #将请求过来的代理url中的 /api 过滤掉
proxy_pass http://localhost:9090; #设置后端请求代理url
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
前端代码需要修改请求的url
export default {
data() {
return {
username: "",
password: ""
};
},
methods: {
login() {
http
.post("http://localhost/api/test2/redis", {"id":"ok"})
.then(data => {
console.log("res: ", data);
})
.catch(err => console.log(err));
}
}
};
原理说明
locahost/api/test2/redis 通过 nginx 代理的映射，真正到达后端的请求url 为 localhost:9090/test2/redis
