AngularJsからNodejsにHTTPリクエストを介してフォームデータを送信しようとしています。 Angularでクロスオリジンリクエストを許可するためのヘッダーファイルを含めましたが、まだ機能していません。
私が得ているエラーは次のとおりです:
Failed to load localhost:4000/Register: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
httpリクエストのコード:
var request = $http({
method: "post",
url: "localhost:4000/Register",
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
},
contentType: "application/json;",
data: myJSON
});
request.success(function(data, status, headers, config) {
$scope.message = data;
console.log($scope.message);
});
request.error(function(data, status, headers, config) {
alert( "failure message: " + data);
});
これはnodejs上の私のサーバーコードです:
const db = knex ({
client: 'pg',
connection: {
host : '127.0.0.1',
user : 'postgres',
//Enter the password which you entered during postgres installation
password : '',
//Whatever the database name be, replace it with 'spdb'
database : 'spdb'
}
});
const app = express();
app.use(cors())
app.use(bodyParser.json());
app.get('/',(req,res)=>{
res.send(database.users);
})
app.post('/Register', (req,res)=>{
const {fname, lname, rollno, section, password, email, role } = req.body;
const hash = bcrypt.hashSync(password);
db.transaction(trx => {
trx.insert({
hash: hash,
email: email,
rollno: rollno
})
.into('login')
.returning('email')
.then(loginEmail => {
return trx('users')
.returning('*')
.insert({
fname: fname,
lname: lname,
rollno: rollno,
section: section,
email: loginEmail[0],
joined: new Date(),
role: role
})
.then(user => {
res.json(user[0]);
})
})
.then(trx.commit)
.then(trx.rollback)
})
.catch(err => res.status(400).json('unable to register'))
})
app.listen(4000,()=>{
console.log('app is running on port 4000');
})
回答 4 件
ChromeからCORS拡張機能を追加する
開発者の同じポートでフロントエンドとバックエンドの両方を実行できます
クロスオリジンヘッダーはサーバーによって送信され、外観を確認し、https://www.npmjs.com/package/corsをNode JSアプリに統合する必要があります。
お役に立てれば、 乾杯。
関連記事
- バックエンドとフロントエンドの両方で機能するようにgitignoreを作成するにはどうすればよいですか?
- vueフロントエンドフラスコバックエンド統合
- フロントエンドコードによって明らかにされたバックエンドAPIを保護する方法は?
- フロントエンドとバックエンドのMERNスタックの接続
- フロントエンドからバックエンドに変数を渡す
- 異なるサーバーでフロントエンドとバックエンドを分離する方法はありますか
- フロントエンドのバックエンドロジックを完全にモックするのは妥当ですか?
- JavaScriptフロントエンドを備えたDjangoバックエンド:ベストプラクティス
- 反応を使用してバックエンドデータベースからフェッチしてフロントエンドに表示するにはどうすればよいですか?
基本ルート「/」でウェブページを返す場合は、リクエストのURLを次のようにしてください: