美文网首页
前端项目线上如何做跨域

前端项目线上如何做跨域

作者: 易良同学 | 来源:发表于2020-01-30 17:31 被阅读0次

前端项目线上如何做跨域

前端页面被跨域限制了,说明不同源。 这个时候可以找一台跟后台接口同源的服务器用 nginx 来做接口转发。

以一个 vue 项目为例,在开发过程中,开发者可以主动去配合 dev 的 proxyTable, 本质上是本地起了一个 node 服务(express)来做转发到 localhost, 因为跨域是会存在于浏览器。 而发布到线上去之后,很可能由于 dev 环境下对每一个接口请求都携带了 /api 前缀,这对我们很友好。

nginx 配置:

...
location /api {
    # 配置一
    proxy_pass http://abc.hahah.com/;
    # 配置二
    proxy_pass http://abc.hahah.com;
    # 配置三
    proxy_pass http://100.200.30.20;
}
...

其中配置二和配置三,本质上是一样的(使用 ip 和域名)ip 后面有没有 / 是由区别的,有 / 表示转发请求之后,/api 后面的内容才会被转发,相当于 url 是被截断的,正好我们需要这种形式,因为 /api 是我们添加的虚拟的 url 部分。

详情可以参考 https://www.cnblogs.com/lemon-le/p/7800879.html 或者 《nginx 高性能 Web 服务器详解》

相关文章

  • 前端项目线上如何做跨域

    前端项目线上如何做跨域 前端页面被跨域限制了,说明不同源。 这个时候可以找一台跟后台接口同源的服务器用 nginx...

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • axios发送跨域请求需要注意的问题

    在实际项目中前端使用到vue,后端使用php进行开发。前端使用axios请求请求。 关于跨域 跨域的概念这些就不说...

  • 前后端分离,后端用springboot遇到的跨域问题

    对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现。 什么是跨域?...

  • springboot中通过cors协议解决跨域问题

    1、对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现。 针对跨域...

  • springboot中通过cors协议解决跨域问题

    1、对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现。 针对跨域...

  • 前端配置proxy跨域

    相信做前端开发的都没少见这种跨域的错误,怎么解决呢?? ?react项目 跨域配置 都是基于 create-rea...

  • Django 后端解决跨域问题

    前端后端分离的项目,经常会遇到跨域请求的问题。解决跨域问题,有从前端的代理解决的方案,和用后端的解决方案。这里介绍...

  • 浅谈前端跨域问题

    最近由于公司的一个项目需求需要前端解决跨域问题,因此学习了下跨域的相关知识,这里做一个总结,方便后期查阅。在讲跨域...

  • 跨域解决方案(史上最易懂)

    跨域总结 1.跨域思路 跨域解决方案一般分为两种:前端解决,后端解决 1.1 前端解决方案 通过前端解决的思想就是...

网友评论

      本文标题:前端项目线上如何做跨域

      本文链接:https://www.haomeiwen.com/subject/gbaithtx.html