Laravel 5.5和Angular 4设置cookie [英] Laravel 5.5 and Angular 4 set cookie

问题描述

我用laravel作为后端(在homestead-mydomain.test上实现)，将angular 4作为前端(在 http:/上实现/localhost:4200 )，现在，我想设置一个从后端到前端浏览器的cookie.

I used laravel as backend (that implemented at homestead - mydomain.test) and angular 4 as frontend (that implemented at http://localhost:4200), now, I want to set a cookie from backend to frontend browser.

后端控制器:

return response(['access_token'=>$response['access_token'], 'expires_in' => $response['expires_in']])
          ->withCookie($cookie);

，响应为:

Access-Control-Allow-Origin:*
Cache-Control:no-cache, private
Connection:keep-alive
Content-Type:application/json
Date:Sat, 30 Dec 2017 09:01:11 GMT
Server:nginx/1.11.9
Set-Cookie:refreshToken=def50200b16fb4563dfa726245a813985f300394fcce058b32138d85d62791e53869049c4dc71358e5789fb267457313e295f43b4f8dc8a5c4a22b03577ef77fb114f71fe17dbad637fc07105cbc67f58adbc905008fb870eae6b238047c9037fdbcf2710909538b36f8432f9528d52c9afd8774fe68ebfb11d125f0951b69ede08e164a1b0f1fe1510906a30858cb1946868a7d89d2d289b27140155b4fca33bee35ce9560696e023a484412bbbf26751ca81d96c88879c6a885b0ed72cc0b0c63639df38b3f7170561c559570cd5fa8faeec89ce06ddaf073a4634dcd5d49c0c5500dc63aeec5d5ffa99c2bad4c817f454c3bfa228397f18162e6fce64790da2f138a506bc906ae944a9aee29f1aa2b49bf2189d703706b2f475588f819985ad6942312070f5c887eec3deaa0761157f3cd86f0a016f3b19a311223c9b703a89efdfd96a878330b4e7dc86b0759c91be9bd7905ed6b94fec3587528402b7; expires=Thu, 22-Aug-2019 09:01:11 GMT; Max-Age=51840000; path=/; HttpOnly
Transfer-Encoding:chunked
Vary:Origin
X-RateLimit-Limit:60
X-RateLimit-Remaining:59

但是当我想将cookie从前端发送到后端时，它不起作用！我使用了角度4:

but when I want to send the cookie from frontend to backend , it does not work! I used angular 4:

refreshToken(){

const headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded', '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.json());
      return response.json()
    },
  )
}

和后端:

$refreshToken = $request->cookie(self::REFRESH_TOKEN);
var_dump($refreshToken); // to be null always

您能帮我解决这些问题吗?

Can you help me to solve these problems?

推荐答案

我通过以下方法解决了此问题: 在Angular应用的根目录中创建proxy.conf.json.在其中放置带有路线的对象:

I solved this problem by: Create proxy.conf.json in the root of Angular app. Put an object with routes inside:

{
  "/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的值更改为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配置文件.它有80个听音；在那儿排队，将其更改为听80默认值；.

I just have /api defined here because all my backend URIs are inside api.php. All calls that look like http://localhost:4200/api/someitems/1 will be proxied to http://mydomian.test/api/someitems/1. Then edit package.json and change the value of start inside scripts to ng serve --proxy-config proxy.conf.json. Now npm run start will start with proxy. The problem I had with this proxy is that it resolves your URL (http://mydomian.test/) to an IP. When it calls Laravel with just an IP the nginx server does not know what to do because it must receive a domain name. nginx allows multiple website on the same IP so it must receive a domain name or to have a default website to which it redirects all calls those have no domain name. In case this is still not fixed in Angular's proxy go to /etc/nginx/sites-available on the Laravel machine, you'll have a mydomian.test config file there. It has listen 80; line there, change it to listen 80 default;.

现在，您可以将API_DOMAIN变量更改为 http://localhost:4200 (或将其全部删除)，然后禁用CORS.

Now you can change the API_DOMAIN variable to http://localhost:4200 (or remove it all together) and disable the CORS.

这篇关于Laravel 5.5和Angular 4设置cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！