Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何修复Angular for Bigcommerce API中的CORS错误

如何修复Angular for Bigcommerce API中的CORS错误
EN

Stack Overflow用户
提问于 2020-08-04 04:42:54
回答 1查看 489关注 0票数 0

我尝试将一个非常简单的Angular 10应用程序连接到Bigcommerce API,但得到以下错误:

CORS策略阻止了对从源'https://angular-example123.stackblitz.io‘获取'https://api.bigcommerce.com/stores/0r5ke/v3/products’的访问:对印前检查请求的响应未通过访问控制检查:请求的资源上不存在' Access - control -Allow- origin‘标头。如果不透明的响应满足您的需求,请将请求的模式设置为'no- CORS‘,以便在禁用CORS的情况下获取资源。

我使用stackblitz.io,因为它提供Bigcommerce所需的https连接。所以我的app.component.ts如下:

代码语言:javascript
运行
AI代码解释
复制
import { Component, VERSION } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Product } from './product';
import { Observable } from 'rxjs';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  url ='https://api.bigcommerce.com/stores/0rfgr/v3/products';
  products: Observable<any>;

  constructor( private http: HttpClient ) {}

  getProducts() {
    let headers = new HttpHeaders();
    headers = headers.set('X-Auth-Token', '123456789').set('X-Auth-Client', '123456789').set('Access-Control-Allow-Origin', '*');
    this.products = this.http.get(this.url, { headers })
  }
}

product.ts文件:

代码语言:javascript
运行
AI代码解释
复制
export interface Product {
  name: string;
}

如果我将URL更改为"https://jsonplaceholder.typicode.com/users“,它就会起作用,数据就会显示出来。任何关于为什么它不能与Bigcommerce协同工作的帮助都将不胜感激。

EN

回答 1

Stack Overflow用户

发布于 2020-08-04 05:27:13

您的后端api应该允许CORS连接。只有这样,您才能从客户端访问数据。它与Angular代码无关,而是api本身。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63240398

复制
相关文章
java继承的调用顺序
加入了子类以后,执行顺序有了新的变化,我们可以总结一下。首先第一部分执行的是父类的静态代码块—子类的静态代码块—主程序。这一部分都是执行一次,与建立多少对象没有关系。第二部分new了一个父类对象,并调用了方法。执行了它的非静态代码块—构造函数—一般方法。第三部分new了一个子类的对象,并调用了方法。执行顺序为父类的非静态代码块—父类的无参构造函数,然后是子类的非静态代码块—子类构造函数—子类的方法。
用户7043603
2022/02/27
8250
UITableView reloadData或viewWillAppear失效
后来发现原来用了UINavigationController后,viewWillAppear方法是没有效果的,要用UINavigationControllerDelegate的– navigationController:willShowViewController:animated:方法才可以达到这个目的。
EltonZheng
2021/01/22
6090
虚函数中构造函数的调用顺序
1 /*曾经有段时间一直被构造函数中的虚函数所困扰,现在通过自己重新学习了一遍,标注一下容易忘记的知识*/ 2 #include<iostream> 3 using namespace std; 4 class Base0 5 { 6 public: 7 Base0(int var):var0(var) 8 { 9 cout<<"Construct base0"<<endl; 10 } ; 11 int var0; 12 void fun()
Gxjun
2018/03/22
3.7K0
虚函数中构造函数的调用顺序
Java构造函数调用顺序问题
今天对Java的构造函数调用顺序进行研究,使用的是与C++类似的方法,即不对源码进行研究,而是直接通过打印代码对构造函数的调用顺序进行研究。
用户7886150
2021/04/20
1.1K0
Java-构造方法调用顺序
执行结果: 开始创建一个ChildClass对象… 创建FatherClass 创建ChildClass 要点: ①关于构造方法结合继承概念的调用,有如下的顺序,函数入口总是main,先执行System.out.println(“开始创建一个ChildClass对象…”)语句;然后我们调用了ChildClass这个类的构造方法,然后由于虽然在public ChildClass{}这个构造方法内并只写了System.out.println(“创建ChildClass”);但是其第一步必定执行super();于是去执行其父类FatherClass类的构造方法,同理,FatherClass类构造方法执行的时候又得先得执行默认的Object类的构造方法,不过其没有相应的语句输出。 ②总结执行顺序:构造方法第一句总是:super(…)来调用“此类的父类”对应的构造方法。所以,流程就是:先向上追溯到Object,然后再依次向下执行类的初始化块和构造方法,直到当前子类为止。
Fisherman渔夫
2019/07/30
9360
Java构造函数调用顺序问题
今天对Java的构造函数调用顺序进行研究,使用的是与C++类似的方法,即不对源码进行研究,而是直接通过打印代码对构造函数的调用顺序进行研究。
全栈程序员站长
2022/06/28
7540
多重继承重名方法调用顺序
#coding=utf-8 class base(object): def test(self): print('----base test----') class A(base): def test(self): print('----A test----') # 定义一个父类 class B(base): def test(self): print('----B test----') # 定义一个子类,继承自A、B class
汪凡
2018/05/29
7540
JAVA & .NET创建对象构造函数调用顺序
基类静态初始化块——当前类静态初始化块——基类初始化块——基类构造函数——当前类初始化块——当前类构造函数
雪飞鸿
2019/03/08
1.1K0
react源码解析-生命周期调用顺序
函数组件hooks的周期会在hooks章节讲解,这一章的使命周期主要针对类组件,各阶段生命周期执行情况看下图:
长腿程序员165858
2022/11/10
2340
Java抽象类及子类实例化顺序和方法调用顺序测试
测试目的 验证抽象类及子类实例化顺序; 验证抽象类是否可以在子类未实例化时调用子类实现的抽象方法; 验证java的多态性 实例 抽象类: package com.secbro.test.abstractInit; /** * @author zhuzhisheng * @Description * @date on 2016/5/28. */ public abstract class Fruit { protected Fruit(){ System.out.print
程序新视界
2022/05/06
8390
关于UrlHttpConnection.setRequestProperty()的调用顺序问题的验证「建议收藏」
在Android项目中使用到了HttpURLConnection请求资源,对于其中的方法setRequestProperty()的调用顺序有些疑惑。
全栈程序员站长
2022/09/30
9310
关于UrlHttpConnection.setRequestProperty()的调用顺序问题的验证「建议收藏」
Unity3D 销毁GameObject api调用顺序
对于每个GameObject来说,实际调用顺序是OnDisable->OnBecameInvisible->OnDestroy,但是在多个GameObject直接不能保证调用顺序,可能第一个GameObject的OnDestroy已经调用了,另一个的OnDisable才开始调用。所以当多个GameObject调用一个全局变量时,要注意。例如:
立羽
2023/08/24
2430
如何保证分布式系统中接口调用的顺序性?
分布式是当下比较流行的一个话题,很多大型的互联网公司都是分布式系统,将一个大而全的系统拆分成多个小而精的一个个的功能单一、职责集中的子系统,系统之间通过约定好的协议、规则进行调用,降低系统之间的耦合度,避免牵一发而动全身。
编程大道
2020/01/16
2.3K0
如何保证分布式系统中接口调用的顺序性?
顺序表的定义_顺序表的逻辑顺序和物理顺序
来看一个生活中的例子:周末和朋友一起吃火锅,人非常多,我们需要在等候区等候,这个等候区就与顺序表有非常多的相似之处,借助它去理解顺序表的特点。首先,在等候区有非常多的椅子,这些椅子往往是排成一排连续排放的,中间不会空出很大的空间造成浪费。这就与在顺序表中选取存储单元的方法是一样的,我们会选取一段地址连续的存储单元去存放顺序表。接着工作人员会安排我们在椅子上连续的坐下等候。在存储单元当中去进行数据的存放是一样的,也是依次地存放线性表当中的数据元素,中间也不会空出许多存储单元造成空间的浪费。最后结伴而行的朋友也会坐在相邻的椅子上,这与顺序表的存放是相同的。在逻辑上相邻的两个元素在物理位置上也要保证它相邻,也会把它存放在相邻的存储单元上。在这个例子当中,其实椅子就代表着存储单元,而每一个等候的人就是要存放的数据元素。来总结一下顺序表的特点:
全栈程序员站长
2022/09/20
1.7K0
react源码解析11.生命周期调用顺序
函数组件hooks的周期会在hooks章节讲解,这一章的使命周期主要针对类组件,各阶段生命周期执行情况看下图:
用户9002110
2021/12/08
2550
react源码解析11.生命周期调用顺序
函数组件hooks的周期会在hooks章节讲解,这一章的使命周期主要针对类组件,各阶段生命周期执行情况看下图:
zz1998
2021/12/15
2090
react源码解析11.生命周期调用顺序
函数组件hooks的周期会在hooks章节讲解,这一章的使命周期主要针对类组件,各阶段生命周期执行情况看下图:
zz1998
2021/12/03
2360
react源码解析11.生命周期调用顺序
函数组件hooks的周期会在hooks章节讲解,这一章的使命周期主要针对类组件,各阶段生命周期执行情况看下图:
全栈潇晨
2021/06/11
3450
iOS 多个category同时交换同一个方法
结论: 1.结果会覆盖,后面的会覆盖前面的,最后执行的是2的方法。无论是类方法还是实例方法。后面代码会做验证。 2.每个category的+ (void)load方法是独立,都会执行,不会相互覆盖。
且行且珍惜_iOS
2021/09/07
1.5K0
点击加载更多

相似问题

调用[超级viewWillAppear] [超级viewDidLoad]等的正确顺序是什么?

10

未调用viewWillAppear

11

不调用viewWillAppear

20

未调用viewWillAppear

22

未调用ParentViewController的ViewWillAppear

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档