nginx怎么解决跨域-Nginx-PHP中文网

nginx怎么解决跨域

(*-*)浩

发布： 2019-07-13 15:15:06

原创

4519人浏览过

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

nginx怎么解决跨域

前端：vue.js+nodejs+webpack

后台：SpringBoot

反向代理服务器：nginx

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

1、将前端代码打包：

npm run build

登录后复制

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

/Users/xxx/ideaProjects/webtest/dist

塔可商城

塔可商城, 一个基于springboot+uniapp+vue3技术栈开发的开源跨平台小程序、管理后台，后端服务的项目，它内置提供了会员分销，区域代理，商品零售等功能的新零售电商系统。强大弹性的架构设计，简洁的代码，最新的技术栈，全方面适合不同需求的前端，后端，架构的同学，同时更是企业开发需求的不二选择。项目结构通过项目结构，你将清楚明白你即将入手的是一个怎么样的项目，你可能需要什么，如何

查看详情

2、打开

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

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/;# 代理接口地址
        }

登录后复制

测试

前端发送请求：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使用教程栏目进行学习！

以上就是nginx怎么解决跨域的详细内容，更多请关注php中文网其它相关文章！