如何克服ReactJS中的CORS問題

我想通過我的React應用程序中的Axios進行API調用。但是，Iam在我的瀏覽器中獲取此CORS問題。我想知道我是否可以從客戶端解決這個問題，因爲我無法在內部訪問該API。附加的是我的代碼。如何克服ReactJS中的CORS問題

const response = axios({ 
    method: 'post', 
    dataType: 'jsonp', 
    url: 'https://awww.api.com', 
    data: { 
    'appToken':'', 
    'request':{ 
     'applicationName':'ddfdf', 
     'userName':'[email protected]', 
     'password':'dfd', 
     'seasonIds':[1521ddfdfd5da02] 
    } 
    } 
    }); 
    return{ 
    type:SHARE_REVIEW, 
    payload:'response' 
} 
}

附件是我WebPack.config.js

module.exports = { 

entry: [ 
'./src/index.js' 
], 
output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
}, 
module: { 
loaders: [{ 
    exclude: /node_modules/, 
    loader: 'babel', 
    query: { 
    presets: ['react', 'es2015', 'stage-1'] 
    } 
}, 
{ test: /\.json$/, loader: "json-loader"}] 
    }, 
resolve: { 
    extensions: ['', '.js', '.jsx'] 
}, 
devServer: { 
historyApiFallback: true, 
contentBase: './' 
}, 
node: { 
dns: 'mock', 
net: 'mock' 
}, 
};

來源

2017-04-18 mohan babu

如果服務器允許使用它的資源，服務器應該發送適當的頭文件......所以，只修復服務器端，客戶端無法繞過CORS，因爲這會使CORS不相關 –

理想的方法是CORS支持添加到您的服務器。

您也可以嘗試使用單獨的jsonp模塊。據我所知axios不支持jsonp。所以我不確定您使用的方法是否符合有效的jsonp請求。

CORS問題還存在另一個棘手的問題。您將不得不使用nginx服務器作爲服務器和客戶端的代理來部署代碼。這個東西，將做我們的proxy_pass指令。配置您的nginx服務器的方式是，處理您的特定請求的位置塊將proxy_pass或重定向您的請求到您的實際服務器。 CORS問題通常是由於網站域的變化而發生的。當你有一個單獨的代理服務器作爲你的客戶端和你的服務器時，瀏覽器被愚蠢地認爲服務器和客戶端駐留在同一個域中。 Ergo no CORS。

考慮這個例子。

你的服務器是my-server.com和你的客戶是my-client.com 配置nginx的如下：

// nginx.conf 

upstream server { 
    server my-server.com; 
} 

upstream client { 
    server my-client.com; 
} 

server { 
    listen 80; 

    server_name my-website.com; 
    access_log /path/to/access/log/access.log; 
    error_log /path/to/error/log/error.log; 

    location/{ 
     proxy_pass http://client; 
    } 

    location ~ /server/(?<section>.*) { 
     rewrite ^/server/(.*)$ /$1 break; 
     proxy_pass http://server; 
    } 
}

這裏my-website.com將是網站，該代碼可以被訪問（代理網站的名稱）的最終名稱。一旦nginx配置成這種方式。您將需要修改請求，使得：

所有API調用更改從my-server.com/<API-path>到my-website.com/server/<API-path>

如果你不熟悉nginx的我勸你去通過documentation。

解釋什麼是在配置發生上述簡要：

的upstream小號定義實際的服務器向誰請求將被重定向
的server塊是用來定義的實際行爲nginx服務器。
如果有多個服務器塊，則使用server_name來標識將用於處理當前請求的塊。
的error_log和access_log指令用於確定日誌文件的
的location塊限定不同類型的請求的處理的位置（用於調試）：
1. 第一位置塊處理的所有請求從/開始，所有這些請求都被重定向到客戶端
2. 第二個位置塊處理所有以/server/<API-path>開頭的請求。我們將把所有這些請求重定向到服務器。

注：/server這裏被用來區分服務器端請求的客戶端請求。由於域名相同，因此沒有其他方式可以區分請求。請記住，沒有這樣的約定會迫使您在所有這些用例中添加/server。它可以更改爲任何其他字符串，例如。 /my-server/<API-path>，/abc/<API-path>等

即使這種技術應該做的伎倆，我會強烈建議你CORS支持添加到該服務器，因爲這是理想的方式的情況下像這樣的處理方式。

如果你希望在開發過程中避免這麼做，你可以爲this擴展鉻。它應該允許您在開發過程中執行跨域請求。

來源

2017-04-18 05:38:25

通過名爲CORS的chrome插件臨時解決此問題。 Btw後端服務器必須發送適當的頭到前端請求。

來源

2017-04-18 07:21:52 SaJed

除了@Nahush的回答另一種方式，如果你已經在項目中使用快速框架，那麼你能避免使用Nginx的反向代理。

一個更簡單的方法是使用express-http-proxy

運行npm run build創建包。

var proxy = require('express-http-proxy'); 

var app = require('express')(); 

//define the path of build 

var staticFilesPath = path.resolve(__dirname, '..', 'build'); 

app.use(express.static(staticFilesPath)); 

app.use('/api/api-server', proxy('www.api-server.com'));

使用「/ API /你服務器」從反應代碼來調用API。

因此，該瀏覽器將請求發送到同一個主機，這將是內部將請求重定向到另一臺服務器，瀏覽器會覺得這是來自同一產地未來;）

來源

2017-04-18 15:38:31 niraj

你可以使用http-proxy-middleware繞過CORS建立一個明確的代理服務器：

const express = require('express'); 
const proxy = require('http-proxy-middleware'); 
const path = require('path'); 
const port = process.env.PORT || 8080; 
const app = express(); 

app.use(express.static(__dirname)); 
app.use('/proxy', proxy({ 
    pathRewrite: { 
     '^/proxy/': '/' 
    }, 
    target: 'https://server.com', 
    secure: false 
})); 

app.get('*', (req, res) => { 
    res.sendFile(path.resolve(__dirname, 'index.html')); 
}); 

app.listen(port); 
console.log('Server started');

從你的反應程序的所有請求應該被髮送到/代理端點，它們將被重定向到目標服務器。

const URL = `/proxy/${PATH}`; 
return axios.get(URL);

來源

2018-02-05 09:26:15

如何克服ReactJS中的CORS問題

回答

相關問題