前后端分离，使用nginx解决跨域问题

忘是亡心i 2021-12-17 17:09 382阅读 0赞

[前后端分离，使用nginx解决跨域问题][nginx]

前端：vue.js+nodejs+webpack

后台：SpringBoot

反向代理服务器：nginx

思想：将前端代码打包，让nginx指向静态资源，nginx对后台请求进行转发。

### 1、将前端代码打包： ###

npm run build

会生成一个dist文件夹。包含一个index.html文件和一个static文件夹，路径以我本地为例：

/Users/xxx/ideaProjects/webtest/dist

### 2、打开 ###

/usr/local/etc/nginx目录下的nginx.conf，在server中添加如下：

![复制代码][copycode.gif]

listen       80; #原为8080，避免冲突，更改为80
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
    
            location / {
                root   /Users/xxx/ideaProjects/webtest/dist;
                index  index.html;
                
                # 此处用于处理 Vue、Angular、React 使用H5 的 History时 重写的问题
                if (!-e $request_filename) {
                    rewrite ^(.*) /index.html last;
                    break;
                }
            }
    
    
            # 代理服务端接口
            location /api/ {
                proxy_pass http://localhost:8080/;# 代理接口地址
            }

![复制代码][copycode.gif]

### 3、测试 ###

前端发送请求：http://localhost/test ，vue-router将其重定向为http://localhost/api/demo/1，实际访问是http://localhost:8080/demo/1。

直接向后台发送请求：访问http://**localhost/api/**demo/1，实际访问是：http://**localhost:8080**/demo/1

标签: [nginx][nginx 1]

好文要顶 关注我 收藏该文 ![icon_weibo_24.png][] ![wechat.png][]

[![20170213165340.png][]][20170213165340.png 1]

[纳豆][20170213165340.png 1]  
[关注 - 1][- 1]  
[粉丝 - 6][- 6]

\+加关注

[« ][Link 1]上一篇：[nginx常用命令][Link 1]  
[» ][Link 2]下一篇：[eclipse安装反编译插件][Link 2]

posted @ 2018-06-20 21:04 [纳豆][Link 3] 阅读(8308) 评论(1) [编辑][Link 4] [收藏][Link 5]

[\#1楼][1] 2019-04-11 16:32 | [从你的世界路过潘][Link 6] [ ][Link 7]

楼主，您好，按照您的配置，看了  
有些疑问：  
1).  
\# 代理服务端接口  
location /api/ \{  
proxy\_pass [http://localhost][http_localhost]:8080/;\# 代理接口地址  
\}  
代理接口地址只到8080，那么他会自动将后台项目的名称加上？？？ 比如接口是[http://148.70.110.87][http_148.70.110.87]:8080/项目名称/方法名称 。。。  
  
2).js 中是这样请求的 ，nginx是按照您上面的配置，但是请求出错[http://148.70.110.87/api/index2][http_148.70.110.87_api_index2] 404 (Not Found)  
  
axios.post('/api/index2')  
.then( (response) =>\{  
console.log(response);  
\})  
.catch( (error)=> \{  
console.log(error);  
\});  
3).您的第三个步骤，测试，实在看不懂要是能有相关的代码就好了

[nginx]: https://www.cnblogs.com/amunamuna/p/9206075.html
[copycode.gif]: /images/20211214/9a677285323141798737fe8d87516b4d.png
[nginx 1]: https://www.cnblogs.com/amunamuna/tag/nginx/
[icon_weibo_24.png]: https://common.cnblogs.com/images/icon_weibo_24.png
[wechat.png]: /images/20211214/62ca5edfa29b428ebdbb39f06ccd517e.png
[20170213165340.png]: /images/20211214/f10628c343574ca9906aa38b171df907.png
[20170213165340.png 1]: https://home.cnblogs.com/u/amunamuna/
[- 1]: https://home.cnblogs.com/u/amunamuna/followees
[- 6]: https://home.cnblogs.com/u/amunamuna/followers
[Link 1]: https://www.cnblogs.com/amunamuna/p/9203002.html
[Link 2]: https://www.cnblogs.com/amunamuna/p/9242170.html
[Link 3]: https://www.cnblogs.com/amunamuna/
[Link 4]: https://i.cnblogs.com/EditPosts.aspx?postid=9206075
[Link 5]: https://www.cnblogs.com/amunamuna/p/9206075.html#
[1]: https://www.cnblogs.com/amunamuna/p/9206075.html#4228552
[Link 6]: https://www.cnblogs.com/panpanpan/
[Link 7]: http://msg.cnblogs.com/send/%E4%BB%8E%E4%BD%A0%E7%9A%84%E4%B8%96%E7%95%8C%E8%B7%AF%E8%BF%87%E6%BD%98
[http_localhost]: http://localhost/
[http_148.70.110.87]: http://148.70.110.87/
[http_148.70.110.87_api_index2]: http://148.70.110.87/api/index2