Vue项目解决跨域的两种方法

什么是跨域

第一种解决方法 

        测试请求地址

https://movie.douban.com/j/search_subjects?type=tv&tag=%E7%83%AD%E9%97%A8&page_limit=50&page_start=0

        在vue.config.js中配置

module.exports = defineConfig({
    devServer: {
    proxy: {
      '/search_subjects': { // search_subjects表示将拦截以search_subjects开头的请求路径
        // 如果请求地址前面不带 search_subjects 的话这里就不写之所以在这写因为下面把地址重置了将 search_subjects 替换成空字符串
        target: 'https://movie.douban.com/j', // 跨域的域名
        changeOrigin: true // 是否开启跨域
        // pathRewrite: { // 重写路径如果在这重置了请求地址前面的参数值 search_subjects那么target的跨域域名后面就可以跟 search_subjects
        //   '^/search_subjects': '' // 把 /search_subjects 替换成空字符串
        // }
      }
    }
  }
})

然后在对应的组件页面中发送请求

getDevServer () {
      axios.get('/search_subjects?type=tv&tag=%E7%83%AD%E9%97%A8&page_limit=50&page_start=0').then(res => {
        console.log('请求', res)
      })
    }

结果

如果不设置相应的跨域 就会报跨域错误

第二种解决方法使用Nginx

server {

        listen      80; #监听80端口可以改成其他端口

        server_name  localhost; # 当前服务的域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {

            proxy_pass http://localhost:81;

            proxy_redirect default;

        }

location /apis { #添加访问目录为/apis的代理配置

rewrite  ^/apis/(.*)$ /$1 break;

proxy_pass  http://localhost:82;

      }