美文网首页
Angular---配置代理,解决跨域问题

Angular---配置代理,解决跨域问题

作者: BigDipper | 来源:发表于2019-04-26 19:13 被阅读0次

参考地址

在开发经贸大学的实训室管理项目时,使用了前后端分离的开发模式,这样就不可避免地碰到跨域问题。

解决跨域问题的办法就是使用前端代理。

  1. 首先在项目目录下新建一个名为proxy.config.json的文件,文件内容如下:
{
  "/labm": {
    "target": "http://192.168.1.253:8080",  // 后台的服务器地址
    "secure": "false"  //根据个人需求添加是否要跨域传cookie
  }
}

其中/labm是代理的名称,一般都是接口请求的ip地址后面的第一个参数名。
比如后台地址是http://192.168.1.253:8080/labm/api/trainingRoom/list,那么发起http请求时的地址就是这样:

getLabs(): Observable<any> {
    return this.http.get('/labm/api/trainingRoom/list');
}

因为http://192.168.1.253:8080已经被代理到/labm上!

  1. 然后配置package.json文件:
"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "mock": "json-server -c ./mock/json-server.json ./mock/data.json"
  },
  1. 重启项目,执行命令,就可以跨域了:
npm run start

相关文章

  • Angular---配置代理,解决跨域问题

    参考地址 在开发经贸大学的实训室管理项目时,使用了前后端分离的开发模式,这样就不可避免地碰到跨域问题。 解决跨域问...

  • vue cli 解决跨域 线上 nginx 反向代理配置

    vue cli 解决跨域 线上 nginx 反向代理配置 前后分离 axios 接 api 跨域问题如图: 解决办...

  • Webpack 开发服务器代理设置解决跨域问题

    在前端开发过程中,可能会遇到跨域问题,在 webpack 设置中对 devServer 配置代理即可解决跨域问题,...

  • 跨域问题,解决方案

    跨域问题,解决方案 - Nginx反向代理跨域问题,解决方案 - CORS方案此为原作者的链接:跨域问题,解决之道

  • Koa代理Http请求

    Koa 代理http请求,解决跨域问题 1、为什么用Koa做跨域代理? "最初为了解决跨域问题,我把站点部署到了n...

  • ajax跨域--nginx反向代理

    用nginx反向代理实现跨域,是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题,支持所有浏览器,支持...

  • webpack设置代理出现的问题

    一、解决跨域问题有几种解决方案:跨域资源共享 CORSjsonpproxy (Nginx代理或其他的服务器代理)在...

  • nginx 配置

    1、nginx访问配置 2、代理本地3000端口到3066端口 3、代理网络端口和本地端口到3066解决跨域问题 ...

  • Js请求跨域问题

    一、请求跨域问题概述 跨域:指的是协议名、端口或者域名不一致的情况都是跨域。 二、跨域问题的解决方案 1、同域代理...

  • 用nginx的反向代理机制解决前端跨域问题

    用nginx的反向代理机制解决前端跨域问题 Vue做前台,后台走接口就会遇到跨域问题。这里Nginx做反向代理是一...

网友评论

      本文标题:Angular---配置代理,解决跨域问题

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