ノード+ VUE + nginxのクロスドメイン処理プロジェクト

同一生成元ポリシー/ SOP(同一生成元ポリシー)が大会で、1995年にNetscapeがブラウザを導入し、それがブラウザの中核である同一生成元ポリシーの欠如、ブラウザはXSSに対して脆弱である場合、また、最も基本的なセキュリティ機能です、CSFR攻撃。相同は、二つの異なるドメイン名が同じアドレスのIPを指していても、3と同じ、いわゆる「プロトコル名+ +ポート」を参照している場合、リクエストURL、ドメイン名、および3つのポートのいずれか一方との間の契約、また、非相同的ですクロスドメインであり、現在のページのURLと異なります

Vueの遠位クロスドメイン処理:

proxy: {
      '/api': {
        target: 'http://www.globm.top',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
const baseUrlHash = {
  production: 'http://www.globm.top:6090',
  development: '/api'
}
const BASE_URL = baseUrlHash[process.env.NODE_ENV]
axios.defaults.baseURL = BASE_URL

クロスドメイン処理やnginxの:(プロジェクトやクロスドメインを一度に処理することができますnginxのドメイン間でのバックエンドプロジェクト処理、それ以外の場合は、ダブルクロスドメインを作成します)

クロスドメインノード

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*")
    res.header('Access-Control-Allow-Headers', 'Content-type')
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,PATCH")
    res.header('Access-Control-Max-Age',1728000)//预请求缓存20天
    next()
})

nginxのクロスドメイン

location / {
        try_files $uri $uri/ /index.php?$query_string;
	add_header 'Access-Control-Allow-Origin' '*';
	add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS,PUT,DELETE';
	#add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';
	add_header 'Access-Control-Allow-Headers' '*';
    }
公開された21元の記事 ウォンの賞賛2 ビュー20000 +

おすすめ

転載: blog.csdn.net/weixin_45266125/article/details/104050747