【发布时间】：2021-03-16 05:06:14
【问题描述】：
我是 Ember.js 的新手，目前正在开发一个车辆应用程序。我已经完成了登录部分，其中我有一个带有 fetch 的 HTTP Post 请求，该请求在 init 对象中有 credentials : 'include' 并将其发送到远程服务器。成功登录后，用户将转到主页，其中有三个选项按钮：车辆、注销和个人资料数据。此外，cookie 被设置为登录响应具有 set-cookie 标头。目前我没有使用车辆按钮，但其他两个没有按预期工作。对于他们，我已经发出了另外两个 http 获取请求，其中我在 init 对象中有 credentials : 'include'，但我假设我无法访问其中有我的 jsessionId 的 cookie。我尝试使用document.cookie 读取它们，但结果发现jsessionId 只是HTTP，这意味着它无法通过JavaScript 访问。
如果我读取 cookie，我可以将它们包含在我的两个获取注销和 getUser 请求中，我认为这样请求就会成功。
我是对还是错，我该怎么办？
这是我的一些源文件：
components/login.js
import Component from '@ember/component';
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";
import {inject as service} from "@ember/service";
export default class LoginComponent extends Component{
@tracked email;
@tracked password;
@service router;
@action
logUser(e){
e.preventDefault();
let userData = {
'email' : this.email,
'password' : this.password
};
let fetchObject = {
method: 'POST',
credentials: 'include',
headers : {
'Content-type' : 'application/json',
},
body : JSON.stringify(userData),
};
fetch('https://gara6.bg/auto-api/users/login', fetchObject)
.then(response =>{
return response.json();
})
.then(data =>{
if(data.statusCode == 'SUCCESS'){
this.redirectHome(data);
}
else{
throw Error('Check your data or connection');
}
})
.catch(error =>{
alert('Unable to log in ! ' + error);
});
}
redirectHome(data){
this.router.transitionTo('home');
}
}
components/login.hbs
<form {{on 'submit' this.logUser}} id='login'>
<label id="label" class="formElement" for="exampleInputEmail1">Email address</label>
<Input class="form-control formElement input" id="exampleInputEmail1" placeholder="Enter email" @value={{this.email}}/><br>
<label id="label" for="exampleInputPassword1">Password</label>
<Input class="form-control formElement input" id="exampleInputPassword1" placeholder="Password" @value={{this.password}}/><br>
<button id='loginLink' class='btn btn-primary btn-lg formElement ' type='submit'>Log In</button>
</form>
模板/home.hbs：
<h1>Welcome User!</h1>
<OptionButtons/>
components/option-buttons.hbs:
<div class="buttonHolder">
<button class='btn btn-primary btn-lg homeButton' type='button' {{on 'click' this.logOut}}>Log Out</button><br>
<button class='btn btn-primary btn-lg homeButton' type='button'>Vehicles</button><br>
<button class='btn btn-primary btn-lg homeButton' type='button' {{on 'click' this.userMe}}>Profile Data</button><br>
</div>
components/option-buttons.js
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from "@ember/object";
export default class OptionButtonsComponent extends Component {
@service router;
@action
userMe(){
let fetchObject = {
method: 'GET',
credentials : 'include',
headers : {
'Content-type' : 'application/json',
},
};
fetch('https://gara6.bg/auto-api/users/me', fetchObject)
.then(response => {
return response.json();
})
.then(data => {
if(data.statusCode == 'SUCCESS'){
console.log(data.data);
}
else{
throw ('Check your internet connection');
}
})
.catch(error =>{
alert('Unable to Log out ! '+ error);
});
}
@action
logOut(){
let fetchObject = {
method: 'POST',
credentials : 'include',
headers : {
'Content-type' : 'application/json',
},
};
fetch('https://gara6.bg/auto-api/users/logout', fetchObject)
.then(response => {
return response.json();
})
.then(data => {
if(data.statusCode == 'SUCCESS'){
this.backToLogin();
}
else{
throw ('Check your internet connection');
}
})
.catch(error =>{
alert('Unable to Log out ! '+ error);
});
}
backToLogin() {
this.router.transitionTo('login');
}
}
【问题讨论】：
-
您的 CORS 响应如何？它必须发送
Access-Control-Allow-Credentials: true！您还确定需要 CORS 并且不能只使用 ember 代理进行开发吗？这取决于您将在哪里部署应用在生产中。它是您可能不想使用 CORS 的生产服务器。 -
@Lux，所有三个响应（登录、注销和 getUser）都发送 'Access-Control-Allow-Credentials: true' 。我对 CORS 不够熟悉，现在我知道什么是 ember 代理。如果你能向我解释一下就好了。我正在开发这个应用程序，以了解 Ember.js 的基础知识，我不确定它是否会在未来部署。
-
另外，我注意到即使登录请求的响应也会发送 set-cookie: ...来自 set-cookies 标头，因此 set-cookies 可能无法正常工作。
-
您可以运行
ember serve --proxy=http://example.com/，ember 开发服务器会将所有AJAX 请求代理到http://localhost:4200到example.com。这允许您在没有 CORS 的情况下进行开发，就像您的 API 和 ember 应用程序来自同一来源一样。还可以考虑加入 ember 社区 discord 服务器以获得更具交互性的帮助体验。
标签： javascript http cookies ember.js