当我使用withCredentials时,我可以看到cookie被发送到服务器。但是发送任何东西到服务器。我使用laravel作为后端,使用angular 4作为前端。此外,cookie没有显示在chrome开发人员工具上,我无法使用它们访问它们。
另外,我在laravel中使用了Cors中间件:
<?php
namespace App\Http\Middleware;
use Closure;
class Cors
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
$response = $next($request);
$response->headers->set('Access-Control-Allow-Origin', 'http://localhost:4200');
$response->headers->set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
$response->headers->set('Access-Control-Allow-Headers', 'Content-Type, Accept, Authorization, X-Request-With');
$response->headers->set('Access-Control-Expose-Headers', 'Content-Disposition, x-total-count, x-filename');
$response->headers->set('Access-Control-Allow-Credentials', 'true');
return $response;
}
}
当我第一次向服务器请求设置cookie时,以下响应显示:
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Content-Type, Accept, Authorization, X-Request-With
Access-Control-Allow-Methods:GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Origin:http://localhost:4200
Access-Control-Expose-Headers:Content-Disposition, x-total-count, x-filename
Cache-Control:no-cache, private
Connection:keep-alive
Content-Type:application/json
Date:Tue, 02 Jan 2018 09:04:32 GMT
Server:nginx/1.11.9
Set-Cookie:refreshToken=def502005a2ccf60eafdee2137df25a628d49f70c4571bedde628d50e45c0fe4b73f84f86bb469f0f77247dc2abc13c0c5c938027beb13fe534eb7bb41f4aed99faf49ebf2a238a007ce9514108951366db45a311d70d17d65dd48f5df6aa50f257c828cce16e589983c1e06c9e8d7d52806a1a9401569f87b3a394469e938c4ddbfcc7985e257d8f0d0df416e7b8a5bbd19e86050db3be5b90953c515934f529489f4e0ba62fb66ab883d1689349bbfb962332bceb322d978b7d20fa7e32bb94eb0050d8f94bfd3a780c4edfeea8eaa6954222b57c30229c2494fec38ee5292396400b25fadee04cad1729f9e9b9ccf12d21a6ed3f9663d41c5423536e64f83542df19fcede28247bfc12accf354e035182c3e019e4a2b55c807924cc50a12fa187b2f655fb19c1b42a1ae526763dd08dbd0d288b3a9c649216ab1abc60cd51bb97dfb0cb7b7b020ff270cf5c81bc94f2acd40f92edeefaf585d46d0750bf; expires=Sun, 25-Aug-2019 09:04:32 GMT; Max-Age=51840000; path=/; HttpOnly
Transfer-Encoding:chunked
X-RateLimit-Limit:60
X-RateLimit-Remaining:58
当我从前端请求时:
refreshToken(){
const headers = new Headers({ 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + this.getToken()})
let options = new RequestOptions({ headers: headers, withCredentials: true });
return this.http.post(API_DOMAIN + 'refresh', JSON.stringify({}), options)
.map(
(response) => {
console.log(response);
return response.json()
},
)
.do(
tokenData =>{
localStorage.setItem('token', tokenData.access_token)
localStorage.setItem('expires_in', tokenData.expires_in)
}
)
}
铬开发商:
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Content-Type, Accept, Authorization, X-Request-With
Access-Control-Allow-Methods:GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Origin:http://localhost:4200
Access-Control-Expose-Headers:Content-Disposition, x-total-count, x-filename
Cache-Control:no-cache, private
Connection:keep-alive
Content-Type:application/json
Date:Tue, 02 Jan 2018 08:57:28 GMT
Server:nginx/1.11.9
Transfer-Encoding:chunked
X-RateLimit-Limit:60
X-RateLimit-Remaining:59
前端和后端服务器使用不同的端口。
您无法保存Cookie,因为您的开发node.js服务器和Laravel Vagrant框位于不同的域中。您可以做的是将来自node.js的调用代理到Laravel服务器。
在Angular应用程序的根目录中创建proxy.conf.json
。放置一个包含路径的对象:
{
"/api": {
"target": "http://mydomian.test/",
"secure": false
}
}
我只是在这里定义了/api
,因为我的所有后端URI都在api.php
中。所有看起来像http://localhost:4200/api/someitems/1
的电话都将被代理到http://mydomian.test/api/someitems/1
。
然后编辑package.json
并将start
中scripts
的值更改为ng serve --proxy-config proxy.conf.json
。现在npm run start
将从代理开始。我使用此代理的问题是它将您的URL(http://mydomian.test/
)解析为IP。当它仅使用IP调用Laravel时,nginx服务器不知道该怎么做,因为它必须接收域名。 nginx允许同一IP上的多个网站,因此它必须接收域名或拥有一个默认网站,它重定向所有没有域名的呼叫。如果在Angular的代理中仍然没有修复它,请转到Laravel机器上的/etc/nginx/sites-available
,那里你将有一个mydomian.test
配置文件。它有listen 80;
线,改为listen 80 default;
。
现在你可以将API_DOMAIN
变量更改为http://localhost:4200
(或将它们全部删除)并禁用CORS。