前言

之前心血来潮，感觉自己算法能力特别垃圾，马上打开 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));
    }
  }
};