No 'Access-Control-Allow-Origin'跨域问题- (mysql-thinkphp) (6)

因为ajax请求一个服务的时候，服务器端，比如thinkphp端，或者java框架，它会检测，你请求时候的域名，就是http请求的时候，request header不是会把客户端的Request URL,Referer 携带给服务端么。

它就会去检测这个值，和服务器的域名是不是同一个。

它这么干就是为了避免，你们随便哪个人来请求我的接口。比如腾讯有个方法，能返回当前所有的在线用户，它当然只允许腾讯自己去获取这个数据，不然它服务器开着给你提供服务么。然后你界面展示一下就像你自己提供的服务一样，不就傻逼了。它就检测，你这个域名和我的不一样就不准请求这个接口，当然还可以设置某一些域名或者ip是允许访问的，其他的就不允许，只要服务端配置一下就行了。我还看到别人写的xxs攻击，我还无法理解。

做联调的时候，前后端可能是独立的服务，就会出现跨域的问题。

跨域问题有好多解决的办法，前后端都可以处理。

1.后端，只要配置

允许 * 所有的，这个是正则匹配。就能访问了，成功。

2.后端写一个通用的class然后去继承，就是上面方法的延伸。

3.vue请求的时候，可以配代理,这样请求的时候就去走代理，不走原本的请求，就能解决跨域的问题，单独改前端就行。修改（版本 "@vue/cli-service": "^4.1.0"）

vue.config.js：文件

vue.config.js：

module.exports = {
  runtimeCompiler: true,
  publicPath: '/', // 设置打包文件相对路径
  devServer: {
    // host: 'localhost',
    port: 8071, 这是前端服务的端口号
    // open: true, //配置自动启动浏览器
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8100/', //对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
   },
}

axios的请求接口任然写 localhost:8071/api/*****接口名,就是vue启的那个服务名。请求的时候，会代理到 http://127.0.0.1:8100/api/****上面去

前端请求的接口是这样的，

但是实际的接口是这样的。这个下面的这个接口地址就是proxy代理里面写的那个地址

4.ajax,jsonp但是，这个后台也要一起修改，并不是前端改好就好了的。我从来没有用过，除了自己测试，后台是绝对不可能帮你改这么多代码的，自己改，上传的时候再删掉。

5.nginx里面配置代理，这个和之前写过的thinkphp无法访问404一样，请求代理，服务器端修改就可以了，没试过。这是链接 https://www.cnblogs.com/chenyi4/p/12332092.html

server{
    # 监听9099端口
    listen 9099;
    # 域名是localhost
    server_name localhost;
    #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871 
    location ^~ /api {
        proxy_pass http://localhost:9871;
    }    
}

抄的别人的代码

6.实在不行可以把接口数据down下到本地请求本地json数据，然后发布的时候改一下接口地址就行了，这样就完全摆脱对后台接口的依赖。