Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

lite-server(Browsersync) - クロスドメイン制約を回避する

More than 3 years have passed since last update.

開発時のシミュレーションでローカルに立てた別のサーバーにアクセスしてファイルをダウンロードするといったことを試すときに、手軽に実行したかったのでlite-serverとコマンドを打つだけでローカルサーバーになる、lite-serverBrowsersyncのラッパー)を使用した。

そこへXMLHttpRequestすると、'Access-Control-Allow-Origin'の指定がヘッダーにないよ~アクセス出来ないよ〜と言われてしまう。

XMLHttpRequest cannot load http://localhost:3000/honyarara.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3002' is therefore not allowed access.

Browsersyncのオプションとして、プロキシとしてたてる事でも回避できるけれど、別ドメインという想定で実装を行いたかったので、browsersyncでたててるサーバー側のヘッダにどこからでもアクセスしていいよ〜という設定を追加する。

// ヘッダを追加する
function setHeader(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    next();
}

module.exports = {
    server: {
        middleware: {
            0: setHeader
        }
    }
};

これでうまくアクセスできるようになりました。

nyamogera
フロントエンド周りをお仕事にしてます。ハムスターのことを一日考えて過ごすことが多いです。
http://nyamogera.net
ics
インタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。最新のウェブ技術を発信するサイト「ICS MEDIA」を運営。
https://ics.media/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away