2016-08-12 5 views
1

私のウェブサイトのリンクからフォントを読み込む際に問題があります。私の見たところでは、私のserver.jsにCORSが私のヘッダにないというエラーがあります。今、私の問題は私のserver.jsにヘッダを挿入する方法誰かが私を助けることができますか?いいえ「アクセス制御 - 許可 - 起源」ヘッダが上に存在している:ここでReactJS No 'Access-Control-Allow-Origin'

は私のウェブサイトのリンクを「原点からのエラー

フォントは、クロスオリジンリソースの共有ポリシーによってロードからブロックされているあります要求されたリソース。起源「http://localhost:3001」のため、下記に示すようあなたは、ヘッダーを挿入することができますアクセス

const app = express(); 

// 
// Tell any CSS tooling (such as Material UI) to use all vendor prefixes if the 
// user agent is not known. 
// ----------------------------------------------------------------------------- 
global.navigator = global.navigator || {}; 
global.navigator.userAgent = global.navigator.userAgent || 'all'; 

// 
// Register Node.js middleware 
// ----------------------------------------------------------------------------- 
app.use(express.static(path.join(__dirname, 'public'))); 
app.use(cookieParser()); 
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(bodyParser.json()); 

// 
// Authentication 
// ----------------------------------------------------------------------------- 
app.use(expressJwt({ 
    secret: auth.jwt.secret, 
    credentialsRequired: false, 
    getToken: req => req.cookies.id_token, 
})); 
app.use(passport.initialize()); 

app.get('/login/facebook', 
    passport.authenticate('facebook', { scope: ['email', 'user_location'], session: false }) 
); 
app.get('/login/facebook/return', 
    passport.authenticate('facebook', { failureRedirect: '/login', session: false }), 
    (req, res) => { 
    const expiresIn = 60 * 60 * 24 * 180; // 180 days 
    const token = jwt.sign(req.user, auth.jwt.secret, { expiresIn }); 
    res.cookie('id_token', token, { maxAge: 1000 * expiresIn, httpOnly: true }); 
    res.redirect('/'); 
    } 
); 

// 
// Register API middleware 
// ----------------------------------------------------------------------------- 
app.use('/graphql', expressGraphQL(req => ({ 
    schema, 
    graphiql: true, 
    rootValue: { request: req }, 
    pretty: process.env.NODE_ENV !== 'production', 
}))); 

// 
// Register server-side rendering middleware 
// ----------------------------------------------------------------------------- 
app.get('*', async (req, res, next) => { 
    try { 
    let css = []; 
    let statusCode = 200; 
    const data = { title: '', description: '', style: '', script: assets.main.js, children: '' }; 

    await UniversalRouter.resolve(routes, { 
     path: req.path, 
     query: req.query, 
     context: { 
     insertCss: (...styles) => { 
      styles.forEach(style => css.push(style._getCss())); // eslint-disable-line no-underscore-dangle, max-len 
     }, 
     setTitle: value => (data.title = value), 
     setMeta: (key, value) => (data[key] = value), 
     }, 
     render(component, status = 200) { 
     css = []; 
     statusCode = status; 
     data.children = ReactDOM.renderToString(component); 
     data.style = css.join(''); 
     return true; 
     }, 
    }); 

    const html = ReactDOM.renderToStaticMarkup(<Html {...data} />); 

    res.status(statusCode); 
    res.send(`<!doctype html>${html}`); 
    } catch (err) { 
    next(err); 
    } 
}); 

// 
// Error handling 
// ----------------------------------------------------------------------------- 
const pe = new PrettyError(); 
pe.skipNodeFiles(); 
pe.skipPackage('express'); 

app.use((err, req, res, next) => { // eslint-disable-line no-unused-vars 
    console.log(pe.render(err)); // eslint-disable-line no-console 
    const statusCode = err.status || 500; 
    const html = ReactDOM.renderToStaticMarkup(
    <Html 
     title="Internal Server Error" 
     description={err.message} 
     style={errorPageStyle._getCss()} 
     userAgent={req.headers['user-agent']}> // eslint-disable-line no-underscore-dangle 
     {ReactDOM.renderToString(<ErrorPage error={err} />)} 
    </Html> 
); 
    res.status(statusCode); 
    res.send(`<!doctype html>${html}`); 
}); 

// 
// Launch the server 
// ----------------------------------------------------------------------------- 
/* eslint-disable no-console */ 
models.sync().catch(err => console.error(err.stack)).then(() => { 
    app.listen(port,() => { 
    console.log(`The server is running at http://localhost:${port}/`); 
    }); 
}); 
/* eslint-enable no-console */ 
+0

あなたは急行でCORSを有効にする方法について説明し、この文書では見たことがありますか? http://enable-cors.org/server_expressjs.html – KumarM

+0

@KumarM少し調べてみましょう – dczii

答えて

0

を許可されていません。これは問題なく私のプロジェクトに取り組んでいます。それが役立つことhttp://expressjs.com/es/api.html#router

希望:ところで

// Where app -> const app = express(); 
app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
}); 

は、あなたがapp.jsからルーティングロジックを分離して、ルータを使用してコードを向上させることができます。

+0

私はコードを追加しようとしましたが、私はまだ同じエラーが出ます:( – dczii

+0

@dczii app.js? – Guillermo

+0

@dczii間違った形で表現されるかもしれませんが、express.jsプロジェクトのapp.jsが必要です – Guillermo

3

はストレート急行でCORSを有効にするthisウェブサイトから:

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
}); 

app.get('/', function(req, res, next) { 
    // Handle the get for this route 
}); 

app.post('/', function(req, res, next) { 
// Handle the post for this route 
}); 
+0

あなたの答えには、appの代わりにRouterを使用するとよいでしょう。 – Guillermo

+0

@Guillermo提案していただきありがとうございます。興味深いですね。私がそれについてもっと学ぶのを助けることができるどんなリンク?それとも反応ルータのような意味ですか? – KumarM

+0

私はapp.use(function(req、res、next){ res.header( "Access-Control-Allow-Origin"、 "*"); resを追加しようとしました。ヘッダー(「アクセス制御許可ヘッダー」、「発信元、X-Requested-With、Content-Type、Accept」)。 next(); }); しかし、私はまだ同じエラーが発生し、フォントを読み込む際にはまだアクセス制御がありませんヘッダーにオリジンを許可します – dczii