我想我的Reactjs应用程序中的Active Directory ADAL插件整合,但取结果时,我得到CORS错误。
我下面React ADAL package步骤,直到我发现了一个SO question它帮了我很多,但还是我得到一个错误CORS获取的同时Dynamics CRM中的数据。
这是我为MyComponent组件的一部分:
import React, { Component } from 'react';
import { adalApiFetch } from '../../../adalConfig';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { APIResponse: '' };
this.getLeads = this.getLeads.bind(this);
}
componentDidMount() {
this.getLeads();
}
getLeads() {
let result;
/*(async () => {
let response = await fetch('https://myorg.api.crm.dynamics.com/api/data/v9.1/leads');
let data = await response.json();
console.log(data);
})();
fetch('https://myorg.api.crm.dynamics/api/data/v9.1/leads')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => console.error('SERVER ERROR:', error));*/
const options = {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
mode: 'cors'
};
adalApiFetch(fetch, 'https://myorg.api.crm.dynamics/api/', options)
.then(response => response.json())
.then(data => {
this.setState(Object.assign(this.state, { APIResponse: data }));
console.log(data);
}).catch(error => console.error('SERVER ERROR:', error));
}
render() {
return (
<div>
<h2>My Component</h2>
</div>
);
}
}
export default MyComponent;
我不停的意见的情况下,你建议我做与ES7方法取代ES5 / 6
fetch
请求。
我得到的DevTools此错误:
访问在取“https://login.microsoftonline.com/ /的oauth2 /授权?CLIENT_ID = 0&response_mode = form_post&RESPONSE_TYPE =代码+ id_token&范围= +的OpenID轮廓&状态= OpenIdConnect.AuthenticationProperties%-SNnykyS3kfmCGv0ar3tRJMn0XvPSwEAAAABBBBBCS5yZWRpcmVgdClodHRwczovL25ld2NvMi5hcGkuY3JtMi5keW5hbWljcy5jb20vYXBpLw%26RedirectTo%3dhttps%253A%252F%252fmyorg.api.crm2.dynamics.com% 252F&随机数= 636848908126477531.RGFhOTkxMzQtqDRlYy00Nzk3LThkZDgtZjk5MjA5MDM3Nzk5MWQyMTE4OWQtODNjMy00YzhhLTk2YjMtMzY4MmQ0MzFkZjU5&REDIRECT_URI = HTTPS%3A%2F%2fcloudredirector.crm2.dynamics.com%3a443%2FG%2fAuthRedirect%2fIndex.aspx&MAX_AGE = 86400' (重定向从 'https://myorg.api.crm2.dynamics.com/api/')从原点 '空' 已被阻止通过CORS政策:响应预检请求未通过访问控制检查:否“访问控制允许来源”标题存在于所请求的资源。如果一个不透明的响应提供您的需求,设置请求的模式,以“无CORS”获取禁用CORS的资源。
服务器错误:
index.js:1446服务器错误:类型错误:无法抓取
对什么是错在这里的任何想法?提前致谢。
这是一个CORS问题。 CORS代表跨源资源共享。 CORS是你的浏览器中实现安全功能。
浏览器会看到一些JavaScript请求已尝试启动比浏览器目前处于什么不同域的请求。
正因为如此我们的浏览器将是可疑的,这种行为不能被改变,它很难在每一个浏览器编码。
浏览器试图使请求本身会做的API一个初始请求的浏览器之前(又名预检)。有点像:
“嘿API,我想提出一个要求过你,请求从一个网站来在some-domain.com,它似乎很奇怪,你怎么看?”
该API具有选项,以允许或不允许的请求。
在你的情况下,API响应:“嘿浏览器,我同意你的观点,这似乎很奇怪,您应该仅允许该请求,如果您从the-other-domain.com的到来。”
然后,API响应返回给浏览器。然后在浏览器回说:“嘿,你知道吗,服务器说,你不能在some-domain.com在,而你提出请求交给他们。对不起Javascript代码我们不可以这样做。”
这就是现在在应用程序中发生的事情。浏览器是要检查是否有不同的域名,子域名或端口。如果这些事情都不同,CORS踢你的情况,你可能是在本地主机:XXX,你正在对https://myorg.api.crm.dynamics/api/请求
要记住一件事是,这是一个浏览器的安全性。如果您在终端申请表格e.g邮差或卷曲。邮递员说:“你知道吗,如果您对不同的API请求我不在乎我不是浏览器,你可以做任何你想要的。”
邮差和类似用途没有CORS的东西,所以他们根本不在乎。
这是怎么回事回答你的问题。