{"id":5784,"date":"2020-06-26T08:53:38","date_gmt":"2020-06-25T23:53:38","guid":{"rendered":"https:\/\/www.lancard.com\/blog\/?p=5784"},"modified":"2025-03-12T11:25:43","modified_gmt":"2025-03-12T02:25:43","slug":"cors%e3%81%abnuxtjs-proxy","status":"publish","type":"post","link":"https:\/\/www.lancard.com\/blog\/2020\/06\/26\/cors%e3%81%abnuxtjs-proxy\/","title":{"rendered":"CORS\u306b@nuxtjs\/proxy"},"content":{"rendered":"

Nuxt.js \u3067spa\u306e\u958b\u767a\u3084\u3063\u3066\u305f\u3089\u666e\u901a\u306f\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u4f7f\u3044\u307e\u3059\u3088\u306d\u3002
\n\u4f8b\u3048\u3070yarn\u3092\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\u30fc\u306b\u63a1\u7528\u3057\u3066\u3044\u308b\u5834\u5408\u3060\u3068<\/p>\n

$ yarn run dev\nyarn run v1.21.1\n$ nuxt\n\n   \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n   \u2502                                               \u2502\n   \u2502   Nuxt.js v2.12.2                             \u2502\n   \u2502   Running in development mode (spa)           \u2502\n   \u2502                                               \u2502\n   \u2502   Listening on: http:\/\/127.0.0.1:3000\/   \u2502\n   \u2502                                               \u2502\n   \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n\nℹ Preparing project for development                                                                                                                            13:54:32\nℹ Initial build may take a while                                                                                                                               13:54:32\n✔ Builder initialized                                                                                                                                          13:54:32\n✔ Nuxt files generated                                                                                                                                         13:54:32\n\n✔ Client\n  Compiled successfully in 25.76s\n\nℹ Waiting for file changes                                                                                                                                     13:55:00\nℹ Memory usage: 241 MB (RSS: 451 MB)                                                                                                                           13:55:00\nℹ Listening on: http:\/\/127.0.0.1:3000\/                    \n<\/code><\/pre>\n
\u3068\u3044\u3063\u305f\u611f\u3058\u3002\u901a\u5e38\u3060\u3068\u30dd\u30fc\u30c8\u306f3000\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u30b5\u30fc\u30d0\u30fc\u5074API\u306f\u5225\u306e\u30dd\u30fc\u30c8\u3067\u63d0\u4f9b\u3059\u308b\u3053\u3068\u306b\u306a\u308b\u306e\u3067\u5225\u30aa\u30ea\u30b8\u30f3\u306b\u306a\u308a\u3001\u305d\u306e\u307e\u307e\u3060\u3068\u958b\u767a\u4e2d\u306bAPI\u30a2\u30af\u30bb\u30b9\u304c\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n
<\/p>\n
\n  \u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u4e0a\u306e\u7406\u7531\u304b\u3089\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u306f\u3001\u30b9\u30af\u30ea\u30d7\u30c8\u306b\u3088\u3063\u3066\u958b\u59cb\u3055\u308c\u308b\u30aa\u30ea\u30b8\u30f3\u9593 HTTP \u30ea\u30af\u30a8\u30b9\u30c8\u3092\u5236\u9650\u3057\u3066\u3044\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001 XMLHttpRequest\u3084 Fetch API \u306f\u540c\u4e00\u30aa\u30ea\u30b8\u30f3\u30dd\u30ea\u30b7\u30fcsame-origin policy\u306b\u5f93\u3044\u307e\u3059\u3002\u3064\u307e\u308a\u3001\u3053\u308c\u3089\u306e API \u3092\u4f7f\u7528\u3059\u308b\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u305d\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u8aad\u307f\u8fbc\u307e\u308c\u305f\u306e\u3068\u540c\u3058\u30aa\u30ea\u30b8\u30f3\u306b\u5bfe\u3057\u3066\u306e\u307f\u30ea\u30bd\u30fc\u30b9\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u3001\u305d\u308c\u4ee5\u5916\u306e\u30aa\u30ea\u30b8\u30f3\u306e\u5834\u5408\u306f\u6b63\u3057\u3044 CORS \u30d8\u30c3\u30c0\u30fc\u3092\u542b\u3093\u3067\u3044\u308b\u3053\u3068\u304c\u5fc5\u8981\u3067\u3059\u3002\n<\/p><\/blockquote>\n
\u300c\u30aa\u30ea\u30b8\u30f3\u9593\u30ea\u30bd\u30fc\u30b9\u5171\u6709 (CORS)\u300d(https:\/\/developer.mozilla.org\/ja\/docs\/Web\/HTTP\/CORS<\/a>)<\/p>\n
\u304b\u3089\u306e\u5f15\u7528\u3067\u3059\u3002<\/p>\n
\u904b\u7528\u6642\u306b\u306f\u5fc5\u8981\u306a\u304f\u3066\u3082\u958b\u767a\u6642\u306b\u306fCORS\u5bfe\u5fdc\u304c\u5fc5\u8981\u306b\u306a\u308b\u3001\u3068\u3044\u3046\u3053\u3068\u304c\u767a\u751f\u3059\u308b\u308f\u3051\u3067\u3059\u3002
\n\u3069\u3046\u3057\u305f\u3089\uff1f<\/p>\n
\u300c\u305d\u3046\u3060\u306d @nuxtjs\/proxy \u3060\u306d\u300d<\/strong>\u3068\u516c\u5f0f\u3055\u3093\u306f\u8a00\u3044\u307e\u3057\u305f(\u9069\u5f53)<\/p>\n
\u300c\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u30ea\u30bd\u30fc\u30b9\u3092\u5171\u6709\u3059\u308b\u306b\u306f\uff1f\u300d(https:\/\/ja.nuxtjs.org\/faq\/http-proxy\/<\/a>)<\/p>\n
\u304b\u3089\u5c0e\u5165\u3084\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u8fbf\u3063\u3066\u3044\u305f\u3060\u304f\u3068\u3057\u3066\u3001\u81ea\u5206\u306e\u8a2d\u5b9a\u306a\u3069\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n
\u524d\u63d0\u6761\u4ef6\u3068\u3057\u3066\u3001cross-env\u3067\u74b0\u5883\u6bce\u306b\u8a2d\u5b9a\u3092\u5207\u308a\u66ff\u3048\u3066\u3044\u307e\u3059\u3002
\n\u3053\u306e\u4ef6\u306b\u3064\u3044\u3066\u306fNuxt.js \u60a9\u307f\u89e3\u6c7a\u306e\u5c0f\u30cd\u30bf\u96c6<\/a>\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<\/p>\n
nuxt.config.js \u304b\u3089\u95a2\u4fc2\u7b87\u6240\u629c\u7c8b<\/p>\n
const environment = process.env.NODE_ENV || 'development'\nconst envSet = require(`.\/.env.${environment}.js`)\n\nexport default {\n\/\/ (\u7565)\n    axios: {\n        proxy: true\n    },\n    proxy: {\n        \/\/ \u958b\u767a\u4e2d\u306fAPI\u30b5\u30fc\u30d0\u30fc\u3068\u30dd\u30fc\u30c8\u304c\u7570\u306a\u308b\u306e\u3067\u305d\u306e\u5bfe\u51e6\u306e\u305f\u3081(CORS\u5bfe\u7b56)\n        '\/api\/': {\n            target: envSet.server.domain,\n            pathRewrite: { '^\/api\/': envSet.server.apiDir }\n        }\n    },\n\/\/ (\u7565)\n<\/code><\/pre>\n
\u958b\u767a\u74b0\u5883\u7528\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb .env.development.js<\/p>\n
module.exports = {\n    server: {\n        domain: 'http:\/\/127.0.0.1',\n        apiDir: '\/api\/'\n    }\n}\n<\/code><\/pre>\n
\u3066\u306a\u8a2d\u5b9a\u3067\u958b\u767a\u6642\u306f http:\/\/127.0.0.1\/api\/ \u306e\u4e0b\u306bAPI\u30a2\u30af\u30bb\u30b9\u3057CORS\u306b\u3064\u3044\u3066\u306f\u3088\u308d\u3057\u304f\u3084\u3063\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n
\u4f7f\u7528\u65b9\u6cd5\u306f \/api\/all \u3068\u3044\u3046\u30d1\u30b9\u306eAPI\u3078\u306e\u30a2\u30af\u30bb\u30b9\u3060\u3068\u3053\u3093\u306a\u611f\u3058<\/p>\n
const res = await this.$axios.get('\/api\/all')\n<\/code><\/pre>\n
\u304a\u307e\u3051<\/strong>
\n\u524d\u306e\u4f8b\u3067\u306f\u3084\u3084\u3053\u3057\u304f\u306a\u308b\u306e\u304c\u5acc\u3067pathRewrite\u3067\u5909\u306b\u66f8\u304d\u63db\u3048\u304c\u8d77\u304d\u306a\u3044\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u304c\u3001API\u304c\u5b9f\u306f \/api\/rev2\/ \u306e\u4e0b\u3067\u63d0\u4f9b\u3055\u308c\u3066\u3044\u305f\u5834\u5408\u306b\u306f\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u4fee\u6b63\u3059\u308c\u3070\u5bfe\u5fdc\u3067\u304d\u307e\u3059\u3002<\/p>\n
module.exports = {\n    server: {\n        domain: 'http:\/\/127.0.0.1',\n        apiDir: '\/api\/rev2\/'\n    }\n}\n<\/code><\/pre>\n
\u3044\u3044\u611f\u3058\u3067\u3059\u306d\u3002<\/p>\n\"Facebook\"<\/a>\"twitter\"<\/a>\"linkedin\"<\/a>\"tumblr\"<\/a>\"mail\"<\/a>","protected":false},"excerpt":{"rendered":"
Nuxt.js \u3067spa\u306e\u958b\u767a\u3084\u3063\u3066\u305f\u3089\u666e\u901a\u306f\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u4f7f\u3044\u307e\u3059\u3088\u306d\u3002 \u4f8b\u3048\u3070yarn\u3092\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\u30fc\u306b\u63a1\u7528\u3057\u3066\u3044\u308b\u5834\u5408\u3060\u3068 $ yarn run dev yarn run v1.21.1 $ nuxt \u256d\u2500 […]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[155],"tags":[189],"class_list":["post-5784","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-nuxt-js"],"_links":{"self":[{"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/posts\/5784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/comments?post=5784"}],"version-history":[{"count":7,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/posts\/5784\/revisions"}],"predecessor-version":[{"id":5791,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/posts\/5784\/revisions\/5791"}],"wp:attachment":[{"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/media?parent=5784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/categories?post=5784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/tags?post=5784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}