讲一讲前后端跨域调试的几个方法

讲一讲跨域调试的几个方法

1. http-server

   使用方式看上述链接， 这个比较轻量级

2. webpack-dev-server

   使用webpack的话可以用这个试试， 用之前先安装一波。

   以vur-cli脚手架举例

   1，查看build/webpack.dev.conf.js中的devServer是否配置了

    proxy: config.dev.proxyTable,
   

   config来自于../config

   2, 查看config/index.js,其中dev选项配置如下

     proxyTable: {
               '/api': {
                   target: 'http://xxx.com',
                   changeOrigin: true,
                   pathRewrite: {
                       '^/api': '/',
                   }
               },
               '/test': {
                   target: 'http:yyy.com',
                   changeOrigin: true,
                   pathRewrite: {
                       '^/test': '/',
                   }
               },
           },
   

   /api表示代理这个目录下的请求，/**表示代理所有请求，

   后面的 target 就是要代理到的网站，changeOrigin 的意思就是把 http 请求中的 Origin 字段进行变换，在浏览器接收到后端回复的时候，浏览器会以为这是本地请求，而在后端那边会以为是在站内的调用。

   3， 接下来npm run dev测试一下

3. nuxt服务端渲染

   nuxt.config.js配置文件, 我直接贴一个配置文件，大家可以对照，其中

   ​ "@nuxtjs/axios", "@nuxtjs/proxy", 这两项需要通过npm安装

   npm run @nuxtjs/axios @nuxtjs/proxy --save-dev
   

   nuxt配置文件内容

   let debug = true;
   const webpack = require('webpack')
   module.exports = {
     /*
      ** Headers of the page
      */
     head: {
       title: 'test',
       meta: [
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
         { hid: 'description', name: 'description', content: 'test' }
       ],
       link: [
         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
       ]
     },
     /*
      ** Customize the progress bar color
      */
     loading: { color: '#3B8070' },
   
     dev: (process.env.NODE_ENV !== 'production'),
     /*
      ** environment variable
      */
     env: {
      
     },
     /*
      ** Build configuration
      */
     build: {
       vendor: ['jquery', 'axios'],
       /*
        ** Run ESLint on save
        */
       extend(config, { isDev, isClient }) {
         if (isDev && isClient) {
           config.module.rules.push({
             enforce: 'pre',
             test: /\.(js|vue)$/,
             loader: 'eslint-loader',
             exclude: /(node_modules)/
           })
         }
       },
       plugins: [
         // set shortcuts as global for bootstrap
         new webpack.ProvidePlugin({
           $: 'jquery',
           jQuery: 'jquery',
           'window.jQuery': 'jquery',
         }),
       ]
     },
     css: [
       "normalize.css",
       '@/assets/css/common.scss'
     ],
     plugins: [
       '@/plugins/filters.js'
     ],
     modules: [
       "@nuxtjs/axios",
       "@nuxtjs/proxy",
     ],
     proxy: {
       '/api': {
         target: 'http://www.xxxx.com',
         pathRewrite: {
           '^/api': '/',
         }
       }
     }
   }
   
   

4. jsonp

   不再介绍了。

5. 后端设置允许任何来源

   setHeader('Access-Control-Allow-Origin', '*')

6. 其余肯定还有蛮多， 欢迎大家指正，

   其实使用的方式都是一致的， 就是在本地起一个服务， 然后通过这个服务去转发数据，这就是代理！

   node熟悉的同学完全可以自己写一个本地的node服务器，来作为代理。