vue-cli プロジェクトの proxyTable に関するクロスドメインの問題

クロスドメインとは何ですか?

同一オリジン ポリシーでは、2 つの URL のプロトコル、ドメイン名、ポートのいずれかが異なる場合、クロスオリジンとみなされます。この記事では主に、vue-cli プロジェクトにおける proxyTable のクロスドメインの問題の概要を紹介します。編集者はこれが非常に優れていると考えたので、ここで共有して参考にさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

クロスドメイン ソリューションとは何ですか?

1.JSONP は、パディング付き JSON (パディングされた JSON またはパラメーター化された JSON) の略称です。

クロスドメイン リクエストを実装するための JSONP の原則は、<script> タグを動的に作成し、その後、同一オリジン ポリシーに従うことなく、<script> の src を使用してクロスドメイン データを取得することです。 </script>

JSONP は、コールバック関数とデータの 2 つの部分で構成されます。コールバック関数は、応答が来たときにページ内で呼び出される関数です。コールバック関数の名前は通常、リクエストで指定されます。データはコールバック関数に渡される JSON データです。
<script> タグを動的に作成し、その src を設定し、src にコールバック関数を設定します。 </script>

var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

ページでは、返された JSON がパラメーターとしてコールバック関数に渡され、コールバック関数を使用して操作しますデータ。

function handleResponse(response){
  // 对response数据进行操作代码
  console.log(response)
}

JSONP は依然として人気のあるクロスドメイン メソッドです。JSONP は便利ですが、いくつかの問題もあります。

まず第一に、JSONP は実行のために他のドメインからコードを読み込みます。他のドメインが安全でない場合、悪意のあるコードが応答に密かに持ち込まれる可能性が高く、JSONP 呼び出しを完全に放棄する以外にそれを追跡する方法はありません。したがって、自分で運用・保守していない Web サービスを使用する場合は、その安全性と信頼性を確保する必要があります。

JSONP には応答テキストに直接アクセスできるという利点がありますが、script タグの onerror イベントはブラウザで広くサポートされておらず、GET 呼び出しのみをサポートしているため、JSONP リクエストが失敗したかどうかを確認するのは簡単ではありません。

2.cros クロスドメイン

CORS 通信プロセス全体はブラウザによって自動的に完了し、ユーザーの参加は必要ありません。開発者にとって、同じソースからの CORS 通信と AJAX 通信に違いはなく、コードはまったく同じです。ブラウザーが AJAX リクエストがクロスオリジンであることを検出すると、追加のヘッダー情報が自動的に追加され、追加のリクエストが行われることもありますが、ユーザーはそれを感じません。

したがって、CORS 通信を実現するための鍵はサーバーです。サーバーが CORS インターフェイスを実装している限り、クロスオリジン通信が可能です。

一般的に使用される完全なクロスドメインヘッダー:

let express=require("express");
let app=express();
app.use(function(req,res,next){
 //如果在webpack里配置了代理，那么这些响应头都不要了
 //只允许8080访问
  res.header('Access-Control-Allow-Origin','http://localhost:8080');

 //服务允许客户端发的方法
 res.header('Access-Control-Allow-Methods','GET,POST,DELETE,PUT');
 //服务器允许的请求头
 res.header('Access-Control-Allow-Headers','Content-Type,Accept');
 //跨域携带cookie 允许客户端把cookie发过来
 res.header('Access-Control-Allow-Credentials','true');
 //如果请求的方法是OPTIONS,那么意味着客户端只要响应头，直接结束响应即可
 if(req.method == 'OPTIONS'){
  res.end();
 }else{
  next();
 }
});
app.listen(3000);

3.hash + iframe

4.postMessage

5.WebSockets

バックグラウンドはインターフェイスのみを提供し、バックグラウンドを変更することはできません。

実際の作業では、フロントエンドとバックエンドの連携はそれほど暗黙的ではありません。バックエンドがインターフェイスを提供するだけで、バックエンドを変更できない場合、どうすればドメインを越えることができますか?
vueプロジェクトとreactプロジェクトの設定ファイルには、開発環境でのクロスドメイン開発に使用されるプロキシ設定があります。設定するとクロスドメインが有効になります。

vue-cli スキャフォールディングによって構築されたプロジェクトは、config フォルダー内のindex.js の proxyTable を変更することで実現できます:

module.exports = {
 dev: {
  env: {
   NODE_ENV: '"development"'
  },
  //proxy

  // 只能在开发环境中进行跨域，上线了要进行反向代理nginx设置
   proxyTable: {
    //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add'即可
   '/api': {
     target: 'http://news.baidu.com',//你要跨域的网址 比如 'http://news.baidu.com',
    secure: true, // 如果是https接口，需要配置这个参数
    changeOrigin: true,//这个参数是用来回避跨站问题的，配置完之后发请求时会自动修改http header里面的host，但是不会修改别的
    pathRewrite: {
     '^/api': '/api'//路径的替换规则
     //这里的配置是正则表达式，以/api开头的将会被用用‘/api'替换掉，假如后台文档的接口是 /api/list/xxx
     //前端api接口写：axios.get('/api/list/xxx') ， 被处理之后实际访问的是：http://news.baidu.com/api/list/xxx
    }
   }
  },

ローカル サービスを使用して、クロスドメイン デモの使用方法をテストしましょう

0. vue-cli で構築されたスキャフォールディング。npm run dev フロントエンドのポート番号は通常、http://localhost:8080

1 です。構成ファイル内のindex.js proxyTable:{} コードを変更して置き換えます。 ：

module.exports = {
 dev: { 
   proxyTable: {
   '/api': {
     target: 'http://localhost:8000',
    secure: true,  
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/api'
    }
   }
  },

2. バックエンドを自分で作成し、express+node.js を使用します。コードは次のとおりです。

現在の環境で list.json ファイルを準備する必要があることに注意してください。データを取得してデータを返すために、事前にフォルダーを読み込んでください。 fs.readFile('./list.json','utf8',cb)

let express = require('express');
let app = express();
let fs = require('fs');
let list = require('./list');
let bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(express.static(__dirname));

//read
function read(cb) { //用来读取数据的，注意自己在mock文件夹下准备一些数据
 fs.readFile('./list.json','utf8',function (err,data) {
  if(err || data.length === 0){
   cb([]); // 如果有错误 或者文件没长度 就是空数组
  }else{
   cb(JSON.parse(data)); // 将读出来的内容转化成对象
  }
 })
}
//write
function write(data,cb) { // 写入内容
 fs.writeFile('./list.json',JSON.stringify(data),cb)
}
// 注意 没有设置跨域头
app.get('/api/list',function (req,res) {
 res.json(list);
});
app.listen(8000,()=>{
 console.log('8000 is ok');
});

3. フロントエンドによって呼び出される API コード:

import axios from 'axios';
 axios.interceptors.response.use((res)=>{
 return res.data; // 在这里统一拦截结果 把结果处理成res.data
});
export function getLists() {
  return axios.get('/api/list');
}

4. コンポーネントのクロスドメインインターフェイスを呼び出して出力します。データ

API をファイルに導入し、印刷されたインターフェイスによって返されるデータをテストします

import {getLists} from '../../api/index'
 export default {
  async created(){
   let dataList=await getLists();
   console.log(dataList,"我请求的数据");
  },

5. コンソールを確認してデータを出力します。これは、クロスドメインが成功したことを意味します。プロキシ サービスは成功しました

開発環境はクロスドメインに成功しました。オンラインになったらどうすればよいですか?

オンラインにするときは nginx リバース プロキシを設定する必要があり、環境変数を区別する必要があります。具体的な設定については画像を参照してください:

関連する推奨事項:

axios を使用した vue2.0 の設定についてクロスドメインリクエスト

以上がvue-cli プロジェクトの proxyTable に関するクロスドメインの問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。