百川的博客

百川的博客
写点或者转载一些感觉精彩的文章,一起分享。见证下成长之路

使用Nginx解决本地开发跨域问题

前端开发需要调用后台接口时经常遇到跨域的问题, 现在介绍使用Nginx的方向代理机制来解决浏览器跨域的问题.

首先假设前端端口是9527, 要调用的后台接口是: http://localhost:8110/admin/edu/teacher/list

由于端口不一样所以存在跨问题

思路

  • 使用nginx监听一个新端口, 把前端, 接口都放在这个端口里监听转发.
  • nginx代码

    # 跨域
    server {
       listen  8888;
       server_name  localhost;
    
       location ^~/test01 {
           rewrite ^/test01(.*)$ /$1 break; # 加上前缀进行区分
           proxy_pass http://127.0.0.1:8110; # 转发接口
       }
    
       location / {
           proxy_pass http://127.0.0.1:9527; # 转发前端项目
       }
    }
  • 启动: nginx

前端设置

  • 代码

       
    fetchData() {
     request({
       url: `http://localhost:8888/test01/admin/edu/teacher/list`,
       method: "get",
     }).then((res) => {
       console.log(res, "跨域测试1");
     });
    }

    2021-04-01T11:07:51.png

效果

  • 2021-04-01T11:09:35.png

总结

  • 把前端和接口都用同一个域, 端口进行转发从而满足同源策略
本原创文章未经允许不得转载 | 当前页面:百川的博客 » 使用Nginx解决本地开发跨域问题

评论