Access-Control-Allow-Origin无法与ionic 5应用程序一起使用 [英] Access-Control-Allow-Origin not working with ionic 5 app
问题描述
我正在按照教程在Ionic应用程序中从服务器发送和接收数据，但是由于CORS，我在这样做时遇到了麻烦。我对CORS问题非常熟悉，并使用了 Access-Control-Allow-Origin将我的Javascript Ajax代码连接到服务器上的PHP后端时，通常会找到解决方案。但是，似乎对Ionic无效。
我已经在SO上看到了一些问题/答案，并且阅读了一些博客，他们都说这应该可以，但是没有用。
我已经完成了控制我的端点并在其中创建了一个PHP文件，如下所示：
header（ Access-Control-Allow-Origin：* ;）;
$ strStudents ='{
学生：[
{
id：1，
name： Enola Rowe，
class： tony@mcu.com，
address： 131 Oswaldo Street；
}，{
id：2，
name： Timmothy Lueilwitz，
age： 15，
地址： 37137 Abbigail Lock；
}，{
id：3，
name： Madilyn Pacocha，
age： 14，
地址： 094 Morris Plains；
}，{
id：4，
name： Harley Cremin，
age： 17，
地址： 14855凯茜广场；
}，{
id：5，
name： Juana Ziemann，
age： 16，
地址： 612 Dayana Stream；
}
]
}’；
返回$ strStudents;
？>
我还尝试了其他组合，例如：
header（'Access-Control-Allow-Origin：*'）;
标头（ Access-Control-Allow-Headers：Origin，X-Requested-With，Content-Type，Accept）；
但没有雪茄。 Ionic中的相关代码（可能不相关，但我还是把它放在这里）如下：
出口类ApiService {
base_path ='http://mywebsite.com/App';
构造函数（私有http：HttpClient）{}
// Http Options
httpOptions = {
标头：new HttpHeaders（{
'Content-Type'：'application / json'
}）
}
handleError（error：HttpErrorResponse）{
if（Error.error instanceof ErrorEvent）{
//发生客户端或网络错误。相应地处理它。
console.error（’发生错误：’，error.error.message）;
;
} else {
//后端返回的响应代码失败。
//响应主体可能包含有关出了什么问题的线索，
console.error（
`后端返回的代码$ {error.status}，+正文为：$ {error .error}`）;
}
//返回可观察到并带有面向用户的错误消息
return throwError（
‘发生了什么坏事；请稍后再试。’）；
}
//创建新项目
createItem（item）：Observable< Student> {
返回this.http.post< Student>（this.base_path，JSON.stringify（item），this.httpOptions）
.pipe（retry（2），catchError（this.handleError）））;
}
//通过ID获取学生的数据
getItem（id）：Observable< Student> {
返回this.http.get< Student>（this.base_path +‘/’+ id，this.httpOptions）
.pipe（retry（2），catchError（this.handleError）））;
}
//获取学生列表
getList（）：Observable< Student> {
返回this.http.get< Student>（this.base_path）
.pipe（retry（2），catchError（this.handleError）））;
}
我得到的错误是：
跨域请求被阻止：同一来源策略不允许读取
在 http：/上的远程资源/mywebsite.com/App 。 （原因：CORS标头
'Access-Control-Allow-Origin'缺失）
（多次）及以后：
后端返回代码0，正文为：[object ProgressEvent]
api.service.ts：31：14错误发生了一些不好的事情；请稍后再试
。
我在做什么错了？
我也想请注意，我已经在此处中描述了代理方法，但是不得已而为之，因为它给我增加了在服务器上添加新文件和更改路径的灵活性。
编辑：由于有些评论说没有完成足够的研究，因此我列出了一些我尝试过的来源中：
https://www.joshmorony.com/dealing-with-cors-cross-origin-resource-sharing-in-ionic-applications/ （由此开始）
https://www.techiediaries.com/ ionic-2-proxy / （此操作无效-应用无法识别代理）
https://ionicframework.com/blog/handling-cors-issues-in-ionic/ （没有ionic.project文件-也尝试了projectname.project文件和其他组合）
https://github.com/ionic-team/ionic-framework/issues/16233 （与此问题相关的公开错误报告）
在离子型中被CORS政策阻止-5 angular （不用说也没有用）
我也尝试过 Ionic的本地Http ，但出现了相同的错误。
我已经在Firefox和Chrome浏览器中尝试过此
我认为人们认为这是一个简单的php编码错误。我相信它与Ionic和HttpClient息息相关。
我找到了问题和解决方法。正如预期的那样，它在Ionic App的代码中。但这不是我所期望的。希望这对处于同样困境的人可能有用。问题是这一行：
base_path =‘http://mywebsite.com/App’；
这应该是：
base_path ='http://mywebsite.com/App/';
细微差别，但很重要。仔细查看控制台日志后，我发现它给出了301错误，事实证明这是永久重定向。在这种情况下，重定向到第二个URI（带有斜杠）。如果我一直使用 base_path ='http://mywebsite.com/App/index.php'; 或任何其他文件名，我可能不会看到此错误。 / p>
301重定向当然返回 Content-Type：text / html，因为它是纯文本页面，而应用程序期望 Content-Type：application / json从而导致CORS错误。
I am following a tutorial to send and receive data from my server in an Ionic application and I am having trouble doing that because of CORS. I am very familiar with the CORS issue and have used the "Access-Control-Allow-Origin" solution often when connecting my Javascript Ajax code to the PHP backend on my server. However, nothing seems to work for Ionic. I've seen several questions/answers here on SO, as well as read some blogs, and they all say this should work but it doesn't.
I have complete control over my endpoint and have created a PHP file there that looks like this:
header("Access-Control-Allow-Origin: *");
$strStudents = '{
"students": [
{
"id": 1,
"name": "Enola Rowe",
"class": "tony@mcu.com",
"address": "131 Oswaldo Street"
},{
"id": 2,
"name": "Timmothy Lueilwitz",
"age": "15",
"address": "37137 Abbigail Lock"
},{
"id": 3,
"name": "Madilyn Pacocha",
"age": "14",
"address": "094 Morris Plains"
},{
"id": 4,
"name": "Harley Cremin",
"age": "17",
"address": "14855 Cathy Square"
},{
"id": 5,
"name": "Juana Ziemann",
"age": "16",
"address": "612 Dayana Stream"
}
]
}';
return $strStudents;
?>
I have also tried other combinations such as:
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
but no cigar. The relevant code in Ionic (probably not relevant but I'll put it here anyway) looks like this:
export class ApiService {
base_path = 'http://mywebsite.com/App';
constructor(private http: HttpClient) { }
// Http Options
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
}
handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occured: ', error.error.message);
;
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(
`Backend returned code ${error.status}, ` + `Body was: ${error.error} `);
}
// return an observable with a user-facing error message
return throwError(
'Something bad happened; please try again later.');
}
// Create a new item
createItem(item): Observable<Student> {
return this.http.post<Student>(this.base_path, JSON.stringify(item), this.httpOptions)
.pipe(retry(2), catchError(this.handleError));
}
// Get a Student's data by ID
getItem(id): Observable<Student> {
return this.http.get<Student>(this.base_path + '/' + id, this.httpOptions)
.pipe(retry(2), catchError(this.handleError));
}
// Get a list of Students
getList(): Observable<Student> {
return this.http.get<Student>(this.base_path)
.pipe(retry(2), catchError(this.handleError));
}
The errors I am getting are:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://mywebsite.com/App. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)
(multiple times) and later:
Backend returned code 0, Body was: [object ProgressEvent] api.service.ts:31:14 ERROR Something bad happened; please try again later.
What am I doing wrong?
Also, I want to note that I have studied the proxy method described here but that would be a last resort since it gives me less flexibility to add new files and change paths on my server.
Edit: Since some comments say not enough research has been done, I am listing a few of the sources I have tried:
https://www.joshmorony.com/dealing-with-cors-cross-origin-resource-sharing-in-ionic-applications/ (started with this)
https://www.techiediaries.com/ionic-2-proxy/ (this did not work - the app does not recognize the proxy)
https://ionicframework.com/blog/handling-cors-issues-in-ionic/ (there is no ionic.project file - also tried the projectname.project file and other combinations)
https://github.com/ionic-team/ionic-framework/issues/16233 (An open bug report related to this issue)
blocked by CORS policy in ionic-5 angular (needless to say that didn't work also)
I have also tried the Native Http in Ionic, but got the same error.
I have tried this in Firefox as well as Chrome
I think people are assuming this is a simple php coding error. I believe it has more to do with Ionic and the HttpClient.
I found the problem and the fix. As expected it was in the Ionic App's code. But it was not quite what I expected. Hopefully, this may be useful to someone in the same predicament. The problem was this line:
base_path = 'http://mywebsite.com/App';
This was supposed to be:
base_path = 'http://mywebsite.com/App/';
Subtle difference but important. After looking carefully at the console logs, I discovered that it was giving a 301 error, which turns out to be a "Permanent Redirect". The redirect in this case was to the second URI (with the slash attached). Had I been using base_path = 'http://mywebsite.com/App/index.php'; or any other file name I probably would not have seen this error.
The 301 redirect was, of course, returning "Content-Type: text/html" since it was a plain text page whereas the app was expecting "Content-Type: application/json" and hence the CORS error.
这篇关于Access-Control-Allow-Origin无法与ionic 5应用程序一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
