问答

前后端分离前端如何调用后端接口?

作者:admin 2021-04-21 我要评论

前端主页: http://localhost :8088/dist/view/index.html 后端地址: http://localhost :8089/mall_war/*.do 我在前端项目里配置了serverHost:' http://localho...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

前端主页:http://localhost:8088/dist/view/index.html
后端地址:http://localhost:8089/mall_war/*.do

我在前端项目里配置了serverHost:'http://localhost:8089/mmall_war'

报错
“Access to XMLHttpRequest at 'http://localhost:8089/mmall_war/user/log”

为什么访问不到呢?这是别人的项目,前端后端都没问题,不知道怎么对接起来

###

你这个问题是跨域引起的

这里我只推荐这两种方式跨域,其它的跨域方式都还有很多但都不推荐,真心主流的也就这两种方式。

开发环境生产环境
corscors
proxynginx

方案一:cors 全称为 Cross Origin Resource Sharing(跨域资源共享)。这种方案对于前端来说没有什么工作量,和正常发送请求写法上没有任何区别,工作量基本都在后端这里。每一次请求,浏览器必须先以 OPTIONS 请求方式发送一个预请求(也不是所有请求都会发送 options, cors),通过预检请求从而获知服务器端对跨源请求支持的 HTTP 方法。在确认服务器允许该跨源请求的情况下,再以实际的 HTTP 请求方法发送那个真正的请求。推荐的原因是:只要第一次配好了,之后不管有多少接口和项目复用就可以了,一劳永逸的解决了跨域问题,而且不管是开发环境还是正式环境都能方便的使用。详细 MDN 文档

但总有后端觉得麻烦不想这么搞,那纯前端也是有解决方案的。

方案二:在 dev 开发模式下可以下使用 webpack 的 proxy 使用也是很方便,参照 文档 就会使用了。但这种方法在生产环境是不能使用的。在生产环境中需要使用 nginx 进行反向代理。不管是 proxynginx 的原理都是一样的,通过搭建一个中转服务器来转发请求规避跨域的问题。

开发环境

  • 本地开发的话如果你是框架之类的,直接使用proxy进行代理即可
  • 如果没有使用框架以及webpack之类的,最简单的就是禁用谷歌浏览器的安全策略

生产环境

生产环境的话还是比较推荐nginx

  • nginx

比如后端地址为http://localhost:8089/mall_war/*.do
那么前端在代码里只需要访问/mall_war/*.do就可以,默认发的是部署服务器的ip来访问
然后再nginx里配置如下

server {
    listen       8066;
    server_name  commonFronted;
    # 项目静态资源目录
    location / {
        alias     /xxx/dist;
        index     index.html;
    }

    location ^~/mall_war/ {
        proxy_pass http://localhost:8089/mall_war/;
        proxy_set_header  Host $host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-Proto https;
        proxy_set_header  X-NginX-Proxy true;
        proxy_buffers 256 4k;
        proxy_max_temp_file_size 0k;
        proxy_connect_timeout 30;
        proxy_send_timeout 60;
        proxy_read_timeout 60;
        proxy_next_upstream error timeout invalid_header http_502;            
    }
}
  • 让后端支持cors请求,但是这种不是很乐观,我一般懒得和后端多废话,碰上不懂得简直浪费时间
###

端口不一样,存在跨域的问题。

如果要使用XMLHttpRequest的话,后端接口要支持cors请求,就是请求头里要返回Access-Control-Allow-Origin

还有一种方式就是使用jsonp,不过这个后端接口也要支持才行。

###

存在跨越问题,一般我们项目都是后端配置运行跨域就可以了
前端也可以配置,不过我之前跟着网上配置,都不行不知道为什么

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 前后端分离前端如何调用后端接口?

    前后端分离前端如何调用后端接口?

  • 前端分页怎么实现?有什么优缺点?什么

    前端分页怎么实现?有什么优缺点?什么

  • webstorm使用sourcetree提交完代码以后

    webstorm使用sourcetree提交完代码以后

  • swift 逃逸闭包问题

    swift 逃逸闭包问题

腾讯云代理商
海外云服务器