用angular发起http.get(),访问后端web API要数据,结果chrome报错:跨域了

Access to XMLHttpRequest at 'http://127.0.0.1:3000/XXX' 
from origin 'http://127.0.0.1:4200' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

此时后端nodejs显示返回值正常。只是浏览器给拦截了。

参考https://www.cnblogs.com/relucent/p/4274158.html

什么是跨域

当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.google.com),那么我们就可以认为它们是相同的域(协议,域名,端口都必须相同)。

跨域就指着协议,域名,端口不一致,出于安全考虑,跨域的资源之间是无法交互的

解决方法很简单,在服务器端的response里添加header,允许前端指定的主机访问

具体到express 参考 https://www.cnblogs.com/ae6623/p/4433143.html

app.route("/XXX")
  .get(jsonParser, (req, res) => {
    //do something
    const content = 'OK'
    res.set({'Access-Control-Allow-Origin': 'http://127.0.0.1:4200'})
      .send(content)
  })

注意要包括 http://,和端口号,最好把这些写在一个配置文件里,在nodejs启动时加载进来,便于在docker等容器里用的时候修改前端的IP和端口

解决跨域No 'Access-Control-Allow-Origin' header is present on the requested resource.的更多相关文章

  1. java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  2. 跨域问题解决----NO 'Access-Control-Allow-Origin' header is present on the requested resource.Origin'http://localhost:11000' is therfore not allowed access'

    NO 'Access-Control-Allow-Origin' header is present on the requested resource.Origin'http://localhost ...

  3. .Net Core 处理跨域问题Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

    网页请求报错: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Or ...

  4. WCF REST开启Cors 解决 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 405.

    现象: 编写了REST接口: [ServiceContract] public interface IService1 { [OperationContract] [WebInvoke(UriTemp ...

  5. Webapi 跨域 解决解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource 问题

    首先是web端(http://localhost:53784) 请求 api(http://localhost:81/api/)时出现错误信息: 查看控制台会发现错误:XMLHttpRequest c ...

  6. js跨域访问,No 'Access-Control-Allow-Origin' header is present on the requested resource

    js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...

  7. (转)AJax跨域:No 'Access-Control-Allow-Origin' header is present on the requested resource

    在本地用ajax跨域访问请求时报错: No 'Access-Control-Allow-Origin' header is present on the requested resource. Ori ...

  8. As.net WebAPI CORS, 开启跨源访问,解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource

    默认情况下ajax请求是有同源策略,限制了不同域请求的响应. 例子:http://localhost:23160/HtmlPage.html 请求不同源API http://localhost:228 ...

  9. has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    前端显示: has been blocked by CORS policy: Response to preflight request doesn't pass access control che ...

随机推荐

  1. CentOS 7.6 安装 Weblogic 12

    http://download.oracle.com/otn/nt/middleware/12c/12213/fmw_12.2.1.3.0_wls_Disk1_1of1.zip java -jar f ...

  2. ios证书生成

    iOS有两种证书和描述文件: 证书类型 使用场景 开发(Development)证书和描述文件 用于开发测试 发布(Distribution)证书和描述文件 用于提交Appstore 准备环境 必需要 ...

  3. qt ShaderEffect上的ShaderToy

    https://zhuanlan.zhihu.com/p/38942460 发现这个挺好玩,有空学习一下

  4. sqlserver为不同数据库建立不同访问权限的帐号

    正式服务器中,为了安全.互不干扰,会给个DB库分配不同的账号,A库有ARead\AReadWrite\AOwn账号,B库有BRead\BReadWrite\BOwn账号.需要配置出来,甚至还能限制AR ...

  5. mysql数据库的主从同步,实现读写分离 g

    https://blog.csdn.net/qq_15092079/article/details/81672920 前言 1 分别在两台centos 7系统上安装mysql 5.7 2 master ...

  6. oracle日期格式化

    TO_CHAR(t.CAMERA_CREAT_TIME, 'YYYY-MM-DD HH24:MI:SS') as point_registerdate,TO_CHAR(t.CAMERA_MODIFY_ ...

  7. excel将百分比数据转为数值格式

    由于于原给定的数据是百分比格式的, 所以先在excel中将数据格式改为数值 修改步骤: 单纯更改单元格格式为数值没用,先在空白单元格输入数值格式的1,复制该数字,选中要转换格式的数据, 右键 ---- ...

  8. 初始Redis

    一.NoSql数据库(Not Only Sql): 1.又称为非关系型数据库,主流的NoSql数据库有: Redis,Hbase,MongoDB 2.NoSql产生的背景: 1.1.数据库的高并发的读 ...

  9. AngularJS2 环境搭建:

    AngularJS2 基础学习: 参考 mybase 3-26 文件 angular 环境的构建:( 由于 Angular 编写的代码不是 浏览器可以直接运行的,需要经过编译,所以需要构建一个环境) ...

  10. 笔记-ASP.NET WebApi

    本文是针对ASP.NET WepApi 2 的笔记. Web API 可返回的结果: 1.void 2.HttpResponseMessage 3.IHttpActionResult 4.其他类型 返 ...