前端设置代理服务器解决跨域问题

前端设置代理服务器解决跨域问题

跨域在前后端进行数据交接的时候是最容易遇见的问题之一,那么身为前端的我们改如何解决跨域问题呢?
这里我们可以用代理服务器的方式进行解决

  1. 拿到请求连接的url 地址,配置“proxy.conf.json” 文件
    // 这里我们以 斗鱼的地址作为案例
    // url=http://capi.douyucdn.cn/api/v1/live?limit=20&offset=0
    //这个时候我们可以把url 中的前半部分提取出来作为代理连接
    //代理连接 api=http://capi.douyucdn.cn
    //真正发请求的时候就为 api/api/v1/live?limit=20&offset=0

所以可以这样写,先创建一个proxy.conf.json 的文件 ,右键改后缀名字就行,不用非得找这个文件,如果有更好

{
     
    "/api": {
     
      "target": "http://capi.douyucdn.cn",
      "secure": false,
      "pathRewrite": {
     
        "^/api": ""
      },
      "changeOrigin": true,
      "logLevel": "debug"
    }
  }
  1. 再在相关框架中配置json 文件,在开发的项目中一般都是由说明书 什么框架.json (这里以angular为例)

前端设置代理服务器解决跨域问题_第1张图片
这里千万注意书写位置,且属性名和相对路径千万不能错!!!
不然就前功尽弃了

  1. 最后可以在任意你想请求 的位置发动网络请求调用这个连接了
 let url = "/api/api/v1/live?limit=20&offset=0";

看起来可能会很麻烦,熟练了能理解了就会得心应手了这里的重点是理解怎么配置代理服务器的连接 取那一部分作为代理连接,希望我的博客能对正在学习的你有所帮助,如果这里有哪些错误的地方欢迎指正
代码路漫漫,留下小手点个赞,谢谢!!!

你可能感兴趣的:(angular,javascript,angular)